Question

我正在将Angular Upgrade模块与从AngularJS升级的组件一起使用。当我在模板中使用组件时，它们工作正常，但是当我尝试将它们用作输入组件时，会收到错误消息：

MyNgComponent cannot be used as an entry component.

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

NullInjectorError: No provider for $scope!

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

是混合模式限制还是有什么方法可以将其用作输入组件？

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

Answer 1

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

创建一个常规Angular Component作为升级的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

Angular升级-不能将升级后的组件用作输入组件

1 个答案: