Angular Upgrade - 不能使用升级的组件作为入口组件

Posted 2023-02-19

【中文标题】Angular Upgrade - 不能使用升级的组件作为入口组件

【英文标题】：Angular Upgrade - can't use upgraded component as entry component

【发布时间】：2019-04-25 07:32:28

【问题描述】：

我正在使用带有从 AngularJS 升级的组件的 Angular 升级模块。当我在模板中使用组件时，它们工作正常，但是当我尝试将它们用作入口组件时，我收到一个错误：

MyNgComponent cannot be used as an entry component.

可能是因为升级的组件被定义为指令。我也尝试过包装到另一个组件中，但在这种情况下，尝试创建组件实例时会出现错误：

NullInjectorError: No provider for $scope!

$scope 由内部 UpgradeComponent 实现请求，如果在模板中使用组件，则可以正常解决。

是混合模式限制还是有什么办法可以作为入口组件使用？

需要入口组件，因为我需要从 JS 实例化该组件并手动附加到非角度 DOM 元素

【参考方案1】：

似乎是混合模式的限制。在我的情况下，有必要动态创建升级的组件并将它们附加到 DOM。在这种情况下，可以使用以下解决方法：

创建一个常规的 Angular 组件作为升级的 AngularJS 指令的包装器，这样它的模板就只包含一个升级的指令 将此包装器组件添加到entryComponents 模块部分 使用根混合组件的注入器动态实例化此包装器组件

例如，我有一个虚拟的 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