Question

我正在尝试通过修改标准stackblitz.com“ Hello”项目来学习如何使用ng-template，以便通过ng-template呈现Hello组件。不幸的是，它得到了一个讨厌的ExpressionChangedAfterItHasBeenCherredError。

上一个值：'名称：未定义'。当前值：“名称：Angular”。似乎已在对其父级和子级进行脏检查后创建了该视图。它是在变更检测挂钩中创建的吗？？

有人可以解释这可以没有错误吗？

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  @ViewChild('tpl') tpl;

  constructor(private _vcr: ViewContainerRef) { }

  ngAfterViewInit() {
    this._vcr.createEmbeddedView(this.tpl);
  }

}

app.component.html：

<ng-template #tpl>
    <hello name="{{ name }}"></hello>
</ng-template>

链接：https://stackblitz.com/edit/angular-48ptik?file=src%2Fapp%2Fapp.component.html

Answer 1

您应该改为使用ngOnInit：

  ngOnInit() {
    this._vcr.createEmbeddedView(this.tpl);
  }

因为ngDoCheck在ngOnInit之后被称为，在ngAfterViewInit之后被称为。

有关Lifecycle Hooks的更多信息。

Answer 2

某些Lifecycle挂钩在渲染部分之前被调用 Angular进程绑定，有些在之后调用

Angular为应用程序组件调用ngAfterViewChecked生命周期挂钩，已经检查了应用程序组件的所有绑定。但是您要在检查后添加viewcontainer

为避免这种情况，您可以使用ngOnInit生命周期挂钩

ngOnInit() {
    this._vcr.createEmbeddedView(this.tpl);
  }

或使用setTimeOut

ngAfterViewInit() {
    setTimeout(()=>this._vcr.createEmbeddedView(this.tpl))
  }

参考：https://blog.angularindepth.com/a-gentle-introduction-into-change-detection-in-angular-33f9ffff6f10

如何在没有中断变化检测的情况下使用<ng-template>？

2 个答案: