javascript - Angular - 添加动态组件时出现异常

Question

我有一个简单的测试代码，用于使用 Angular 4 添加动态组件。

@Component({
  selector: 'component',
  template: `

    <ul><li #item *ngFor="let number of list">{{number}}</li></ul>

    <ng-template #anchor> </ng-template>


    <ng-template #template>
      <li><input type="text" [(ngModel)]="myInput"/></li>
    </ng-template>`
})
class _Component {

  @ViewChild('template')
  template: TemplateRef<any>


  @ViewChild('anchor', { read: ViewContainerRef })
  anchor: TemplateRef<any>


  @ViewChildren('item', { read: ViewContainerRef })
  items: QueryList<ViewContainerRef>
  myInput='';
  list: number[] = [0, 1, 2, 3, 4]

  ngAfterViewInit() {
    this.anchor.createEmbeddedView(this.template)
  }

}

这段代码所做的只是在末尾添加一个虚拟模板。

但是这段代码抛出异常:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: ''. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook ?

这是一个很好的描述性异常。已检查更改后更新 View 。

但是这里有几件事我不明白:

问题:

1:

如果我从模板中删除 input - 那么现在的模板是:

<ng-template #template>
    <li></li>
</ng-template>

— 那么我没有得到异常。这是为什么？

2:

另一个解决方案(在许多解决方案中)是用 ngAfterContentInit 替换 ngAfterViewInit。我已经知道这两者之间的区别。

如果是这样 - 我可以得出结论(从异常消失的事实)在每个 Angualr 的事件中 - 发生变化检测吗？ (这是有道理的，因为 ngAfterViewInit 发生在_after_ ngAfterContentInit)，所以 Angular 可能检测到 ngAfterViewInit 中的上一个动态变化？我说得对吗？

PLNKR

Answer 1

If I remove the input from the template - so now the template is :

输入不是导致问题的原因。 ngModel 指令导致问题。指令和组件实例表示为 Angular 内的 View 节点 - 当前组件的子级。在每个变更检测周期中，Angular 都会更新这些组件/指令实例的输入。这是 Everything you need to know about change detection in Angular 的摘录显示操作顺序:

• updates input properties on a child component/directive instances (1)
• calls AfterContentInit and AfterContentChecked lifecycle hooks on child component/directive instances (5)
• runs change detection for a child view (repeats the steps in this list) (8)
• calls AfterViewInit and AfterViewChecked lifecycle hooks on child component/directive instances (9)

所以假设 Angular 正在为 AppComponent 做变化检测。它为 _Component (6) 运行变更检测。目前还没有指令，所以没有什么可检查的。然后 Angular 为 _Component 调用 afterViewInit Hook ，您可以在其中创建一个子指令实例 ngModel。但是永远不会触发指令 ngModel 的变化检测!当前变化检测周期结束后，Angular 检查变化，发现 ngModel 的 @Input 是一个空字符串，但是之前的值是 undefined 因为它从未被检查过。

将其与使用 AfterContentInit Hook 的情况进行比较。 Hook _Component 的 Angular 调用。您在那里创建一个子指令。 Angular 为 _Component 运行变更检测。现在，该指令已经存在，因此作为 _Component 的变化检测的一部分，也会对该子指令运行变化检测。由于 Angular 应用了空字符串初始值，因此下次检查指令时不会发生错误。