使用@ViewChild查询模板引用变量动态实例化模板的正确方法是什么

Question

我知道我只需要将模板引用变量mytemplate传递给*ngTemplateOutlet就可以了。

出于学习目的，我想通过@ViewChild装饰器使用不同的方法。然而，我犯了一些我不理解的错误。

最小代码：

import { Component, TemplateRef, ViewChild } from '@angular/core';
@Component({
selector: 'app-root',
template:
`
<ng-template #mytemplate>
<p>Hello World</p>
</ng-template>
<ng-container *ngTemplateOutlet="template"></ng-container>
`
})
export class AppComponent {
@ViewChild("mytemplate")
template!: TemplateRef<any>;
}

错误消息：

core.mjs:7640 ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: '[object Object]'. Find more at https://angular.io/errors/NG0100
at throwErrorIfNoChangesMode (core.mjs:8207:11)
at bindingUpdated (core.mjs:14552:17)
at Module.ɵɵproperty (core.mjs:15284:9)
at AppComponent_Template (app.component.ts:10:16)
at executeTemplate (core.mjs:12121:9)
at refreshView (core.mjs:11984:13)
at refreshComponent (core.mjs:13080:13)
at refreshChildComponents (core.mjs:11774:9)
at refreshView (core.mjs:12034:13)
at renderComponentOrTemplate (core.mjs:12101:9)

Answer 1

1. 这是仅在开发模式中出现的错误

2. 但这仍然不应该出现在控制台中。

3. 您可以手动触发更改检测以避免此问题

   constructor(private cd: ChangeDetectorRef) {}
   ngAfterViewChecked(){
   this.cd.detectChanges()
   }
   

文档链接：https://angular.io/errors/NG0100