Angular2动态内容加载引发表达式更改异常

Question

我正在创建一个通用的甘特图可视化组件。

我将显示周数和任务的部分是通用的，但每一行都会有一个我想要动态的标题，例如，当显示每个用户的任务列表时，我想放置一些用户数据和一些操作按钮，但是当按项目显示任务时，我想显示项目数据和项目操作按钮。

我在此之后实施了一个解决方案：https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html

一切似乎都运行良好，我看到每个场景中的操作按钮加载方式不同，但用户或项目数据却没有。此外，单击按钮时的console.log(this.data.name)，我在控制台中正确看到了数据，但是如果我尝试在模板{{ data.name }} 上打印，我什么也看不到。

我在控制台中看到以下错误：

错误：检查后表达式已更改。以前的值：“CD_INIT_VALUE”。当前值：'测试项目 - 任务 3 '。看起来视图是在其父级及其子级经过脏检查后创建的。它是在变更检测挂钩中创建的吗？

我仔细检查了所有步骤，我正在做与你在该教程中看到的完全相同的事情。

有人知道该教程是否过时了吗？

提前感谢您的帮助！

编辑： 如果我将 ngAfterViewInit 更改为 ngOnInit 一切正常......但根据教程我应该使用第一个。谁能给我解释一下？ :-)

Answer 1

错误说明了一切：

似乎视图是在其父级和子级创建之后创建的 被脏检查。它是在变更检测挂钩中创建的吗？

您已经动态创建了组件（“在角度生命周期之外”），这意味着您需要手动控制更改检测。

这就是你需要做的：

1) 为它创建一个组件后触发detectChanges()

2) 在处理 detach() 变更检测之前；

这是我动态创建组件的指令示例：

export class ValidationMessageDirective implements AfterViewInit, OnDestroy {

  private validationMessageComponent: ComponentRef<ValidationMessageComponent> = null;

  ngAfterViewInit(): void {
    let factory = this.componentFactoryResolver.resolveComponentFactory(this.vmComp);
    this.ngOnDestroy();
    this.validationMessageComponent = this.viewContainer.createComponent(factory, null, this.viewContainer.injector);
    this.validationMessageComponent.changeDetectorRef.detectChanges();
  }

  ngOnDestroy(): void {
    if (this.validationMessageComponent) {
      this.validationMessageComponent.changeDetectorRef.detach();
      //this.validationMessageComponent.destroy();
    }
  }

  constructor(
    private viewContainer: ViewContainerRef,
    private componentFactoryResolver: ComponentFactoryResolver,
    @Inject(ValidationMessageComponent) private vmComp: Type<ValidationMessageComponent>
  ) { }
}

相关问题：https://github.com/angular/angular/issues/11007