Angular 2 动态组件加载 ngOnChanges 生命周期钩子调用

Question

在动态组件加载的情况下不调用 ngOnChanges 生命周期钩子是预期的行为吗？ 只为我调用了构造函数 ngOnInit 和 ngAfterViewInit。但是根据docs 应该在ngOnInit 之前调用它。

我正在加载这样的组件：

@ViewChild('place', { read: ViewContainerRef }) container: ViewContainerRef;

   private componentRef: ComponentRef<MyLoggerComponent>;

   constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

   ngAfterViewInit() {
     const componentFactory: ComponentFactory<any> = this.componentFactoryResolver.resolveComponentFactory(MyLoggerComponent);
     this.componentRef = this.container.createComponent(componentFactory);
     this.componentRef.changeDetectorRef.detectChanges();
   }

Plunker

Answer 1

根据讨论，https://github.com/angular/angular/issues/8903 动态组件加载不应在子组件中触发 ngOnChanges，即使在调用 detectChanges 之后也是如此，因为此事件仅为模板绑定保留。

如果您的子组件仅以动态方式加载，您可以使用 Javascript setter 而不是ngOnChanges。示例如下：

export class DynamicallyLoadedComponent {
  private _property: string;
  get property(): string { return this._property; }
  set property(newVal: string) {
    if (this._property === newVal) { return; }
    this._property = newVal;

    this.onChanges();  // instead of ngOnChanges
  }
}