Question

如何在组件中获取所有模板（TemplateRef）的集合？它适用于ViewChild，但ViewChildren未定义...

我使用此question的解决方案。 Plunker以完整的例子。

  @Component({
    selector: 'my-app',
    template: `
            <div>
              <template #model>...</template>
              <template #color>...</template>
            </div>`
  })
  export class App {
  @ViewChild('model') model;
  @ViewChild('color') color;
  @ViewChildren(TemplateRef) templates: QueryList<TemplateRef>;

  ngAfterContentInit() {
    console.log(this.templates); // undefined
    console.log(this.model); // TemplateRef_ {...}
  }
}

我需要templates作为网格组件，可以为列定义模板。不幸的是，ng-content doesn't support动态投影，所以我试图用模板实现它。

Answer 1

如果您将console.log('child', this.templates);移至ngAfterViewInit()，则可以正常运行。

ngAfterViewInit() {
  console.log('child', this.templates);
}

我曾预计它也会在ngAfterContentInit()中发挥作用。这个Angular版本ngAfterContentInit()似乎在ngAfterViewInit()之前运行。我确信这是早先的另一种方式。

Plunker example

Answer 2

您需要实现ChangeDetectorRef.detectChanges（）;在任何儿童的功能中结束

<template>元素未定义@ViewChildren（TemplateRef）

2 个答案: