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

本文介绍了Angular2动态内容加载引发表达式更改异常的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I'm creating a generic Gantt visualization component.

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

The part where I will display the weeks and tasks is generic, but every row will have a header that I want to be dynamic, so for example, when displaying a list of tasks per user I want to put some user data and some action buttons, but when displaying tasks by project I want to display project data and project action buttons.

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

I implemented a solution following this: https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html

一切似乎都可以正常工作，我看到每种情况下动作按钮的加载方式都不同，但用户或项目数据却加载不了.另外，单击按钮上的console.log(this.data.name)，我可以在控制台中正确看到数据，但是如果尝试在模板{{ data.name }}上进行打印，我什么也看不到.

Everything seems to work fine, I see the actions buttons load differently in each scenario, but not the user or project data. Also, console.log(this.data.name) on the button click, I correctly see the data in the console, but if I try to print in on the template {{ data.name }} I see nothing.

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

I see the following error in console:

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

I double checked all steps, and I'm doing the exact same thing you can see on that tutorial.

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

Does anyone know if that tutorial is out dated?

预先感谢您的帮助！

如果我将ngAfterViewInit更改为ngOnInit，则一切正常...但是根据教程，我应该使用第一个.有人可以向我解释吗? :-)

If I change the ngAfterViewInit to ngOnInit it all works... but according to the tutorial I should be using the first. Can anyone explain to me this? :-)

推荐答案

错误说明了一切:

您已经动态创建了组件(角度生命周期的外部")，这意味着您需要手动控制变更检测.

You've created component dynamically ("outside" of angular lifecycle), this means you need to control change detection manually.

这就是您需要做的:

1)在创建组件后，为其触发detectChanges()

1) After creating a component fire detectChanges() for it

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

2) Before disposing detach() change detection;

以下是我的指令示例，该指令可动态创建组件:

Here is example of my directive that creates component dynamically:

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>
  ) { }
}

这篇关于Angular2动态内容加载引发表达式更改异常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！