ViewChildren与templateRef

Question

我想使用ViewChildren make QueryList从TemplateRef，但不能传递到输入组件。

例如

Component.ts：

@ViewChildren(TemplateRef) cellTemplates: QueryList<TemplateRef<any>>;

查看：

<my-component [templatesRef]="cellTemplates"></my-component>

投入：

_templatesRef;
@Input()
set templatesRef(refs: any) {
   this._templatesRef = refs;
}

ExpressionChangedAfterItHasBeenCheckedError:表达式检查后发生了更改。先前的值：'ngIf: false‘。当前值：'ngIf: true‘。

见斯塔克比利茨

Answer 1

在从模板获取cellTemplates之后，应该强制父级检测更改，因此尝试在父级中使用ChangeDetectorRef：

export class AppComponent  {
  name = 'Angular';
  @ViewChildren(TemplateRef, {read: TemplateRef}) cellTemplates: QueryList<TemplateRef<any>>;
  constructor(private cd: ChangeDetectorRef) { }
  ngOnInit(){ }
  ngAfterViewInit(){
    this.cd.detectChanges();
  }
}

您可以在这个文章中找到关于该异常的详细解释。

Answer 2

在您的应用程序组件中，有一个很难看的工作。

<my-component *ngIf="yet" [templatesRef]="cellTemplates"></my-component>

实现afterViewInit并使用setTimeout

export class AppComponent implements AfterViewInit  {
  yet=false;

  ngAfterViewInit()
  {
    setTimeout(()=>{
      this.yet=true
    })
  }
}

问题是，最初cellTemplates是一个空查询，afterViewInit get元素，

Answer 3

为什么不使用您创建的视图变量呢？

<my-component [templatesRef]="title"></my-component>

<ng-template #title>
    ok
</ng-template>