如何解决Angular 9-应用模板和ExpressionChangedAfterItHaHasBeenCheckedError
我一直在研究这个问题,但是没有找到一个解决此简单问题的令人满意的解决方案:我的组件采用具有type属性的对象,并且基于该类型,我想将另一个模板加载到组件视图中。例如:
MyComponent.ts
...
@Input() source: MyObject;
@ViewChild('view1') view1: TemplateRef<any>;
@ViewChild('view2') view2: TemplateRef<any>;
@ViewChild('view3') view3: TemplateRef<any>;
view: TemplateRef<any>;
ngAfterViewInit(): void {
switch(source.type): {
case 'type1': this.view = this.view1; break;
case 'type2': this.view = this.view2; break;
case 'type3': this.view = this.view3; break;
}
}
...
MyComponent.html
...
<ng-container *ngTemplateOutlet="view; context: {}">
</ng-container>
...
<ng-template #view1 ...>
</ng-template>
<ng-template #view2 ...>
</ng-template>
<ng-template #view3 ...>
</ng-template>
...
为简洁起见,以上是伪代码。该文档指出,引用模板的ViewChild变量仅在“ AfterViewInit”生命周期挂钩中可用。但是,如果我尝试应用正确的模板在html中呈现(绑定到“ this.view”属性),则会收到著名的“表达式已更改...”错误。在这里执行“ setTimeout”似乎可以工作,但似乎也很容易。在这种情况下,我只想应用正确的模板,那么在Angular中应用正确的方法是什么?
由于每个模板都不同,因此我想为每个模板将焦点设置为不同的控件。有没有办法知道Angular在DOM中渲染了一个模板,所以我知道需要输入焦点的控件存在?
谢谢!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。