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'.

См. Stackbilitz

Answer 1

Уродливое решение заключается в том, что в вашем компоненте приложения

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

Реализует afterViewInit и использует setTimeout

export class AppComponent implements AfterViewInit  {
  yet=false;

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

Проблема состоит в том, что сначала cellTemplates - это пустой запросafterViewInit получить элементы,

Answer 2

Вы должны заставить parent обнаруживать изменения после получения шаблонов cellTemplates из шаблона, поэтому попробуйте использовать ChangeDetectorRef в parent:

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

Подробное объяснение этого исключения можно найти в этой статье .

DEMO ??

Answer 3

Другое решение без использования ChangeDetectorRef & setTimeout.

@ViewChildren(TemplateRef, {read: TemplateRef})
set cellTemplates(refs: QueryList<TemplateRef<any>>) {
    this._cellTemplates = refs;
}

Answer 4

Почему бы не использовать созданную вами переменную вида?

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

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