Angular TemplateRef ExpressionChangedAfterItHasBeenCheckedError

Question

只是在玩 TemplateRef

所以我设置了这个简单的代码

在我的 chrome 控制台中

ERROR 错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改

如果在 ng-template 里面我可以看到重点

将是本文中的 ngModel

Angular - Exception when adding dynamic component

但使用简单的绑定.....

@Component({
  selector: 'app-root',
  template: `
    <ng-template #myTemplate>
      <button class="tab-button"
                  (click)="login()">{{loginText}}</button>
      <button class="tab-button"
                  (click)="signUp()">{{signUpText}}</button>
    </ng-template>
  `
})
export class AppComponent  implements AfterViewInit, AfterContentInit {
  @ViewChild('myTemplate') tmpl: TemplateRef<any>;

  loginText = 'Login';
  signUpText = 'Sign Up';

  constructor(private view:ViewContainerRef){}

  login() {
    console.log('Login');
  }

  signUp() {
    console.log('Sign Up');
  }

  ngAfterViewInit(): void {
   this.view.createEmbeddedView(this.tmpl)
  }

  ngAfterContentInit(): void {
    // It doesn't work either
    //this.view.createEmbeddedView(this.tmpl);
  }
}

提前致谢

Answer 1

由于#myTemplate 是静态视图查询，您可以使用ngOnInit 挂钩

ngOnInit(): void {
   this.view.createEmbeddedView(this.tmpl)
}