Angular TemplateRef ExpressionChangedAfterItHasBeenCheckedError

Question

只是在玩TemplateRef

所以我設置了這個簡單的代碼

在chrome控制台中

錯誤錯誤：ExpressionChangedAfterItHasBeenCheckedError：表達式被檢查后已更改

我可以看到ng-template里面的意思

將是本文章中的ngModel

Angular-添加動態組件時發生異常

但具有簡單的綁定.....

@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)
}