angular - 使用 templateRef 查看Children

Question

我想使用 ViewChildren 从 TemplateRef 生成 QueryList，但无法传递到输入组件。

例如

组件.ts:

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

查看:

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

输入:

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

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: false'. Current value: 'ngIf: true'.

参见Stackbilitz

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();
  }
}

您可以在 article 中找到有关该异常的详细说明。 .

DEMO 🚀🚀