Угловое обновление - нельзя использовать обновленный компонент в качестве входного компонента - PullRequest
Новая
       52

Угловое обновление - нельзя использовать обновленный компонент в качестве входного компонента

0 голосов
/ 22 ноября 2018

Я использую модуль Angular Upgrade с компонентами, обновленными с AngularJS.Когда я использую компоненты внутри шаблонов, они работают нормально, но когда я пытаюсь использовать их в качестве компонентов ввода, я получаю сообщение об ошибке: 

MyNgComponent cannot be used as an entry component.

Возможно, это связано с тем, что обновленные компоненты определяются как директивы.Я также пытался заключить в другой компонент, но в этом случае он выдает ошибку при попытке создать экземпляр компонента: 

NullInjectorError: No provider for $scope!

$scope запрашивается внутренней реализацией UpgradeComponent, и он разрешается нормально, еслиКомпонент используется в шаблоне.

Это ограничение гибридного режима или есть какой-либо способ использовать его в качестве компонента ввода?

Необходим компонент ввода, поскольку мне нужно создать экземпляр этого компонента из JSи вручную прикрепить к неугловому элементу DOM

1 Ответ

0 голосов
/ 13 марта 2019

Кажется, что это ограничение гибридного режима.В моем случае необходимо было динамически создавать обновленные компоненты и подключать их к DOM.В этом случае можно использовать следующий обходной путь:

  1. Создать обычный угловой компонент в качестве оболочки для обновленной директивы AngularJS, чтобы его шаблон содержал только обновленную директиву
  2. Добавить эту оболочкукомпонент в entryComponents секцию модуля
  3. Динамически создать экземпляр этого компонента-оболочки, используя инжектор корневого гибридного компонента

Например, у меня есть фиктивная директива AngularJS 

angular.module('app').component('myComponent', {
  template: 'dummy content',
  controller: class {},
  controllerAs: 'vm'
});

@Directive({
  selector: 'my-component'
})
export class MyUpgradedDirective extends UpgradeComponent {
  constructor(elementRef: ElementRef, injector: Injector) {
    super('myComponent', elementRef, injector);
  }
}

Создание компонента оболочки: 

@Component({
  selector: 'app-nested',
  template: '<my-component></my-component>'
})
export class WrapperComponent { }

Добавление его в entryComponents

@NgModule({
  imports:      [ BrowserModule, UpgradeModule ],
  declarations: [ AppComponent, NestedComponent, MyUpgradedDirective ],
  entryComponents: [ AppComponent, NestedComponent ] // here
})

Создание экземпляра оболочки с использованием инжектора из корневого гибридного компонента: 

function createMyComponent<T>(componentFactoryResolver: ComponentFactoryResolver, injector: Injector /* must be passed from root hybrid component */, component: Type<T>) {
  return componentFactoryResolver
    .resolveComponentFactory(component)
    .create(injector);
}

Вот некоторые подробности: https://github.com/angular/angular/issues/27432

...