Question

在角度5中，我遇到了以下问题。

 <ng-template [ngTemplateOutlet]="template"></ng-template>

Bug plnkr

我无法选择用于标记的任何组件。

经过一些研究后，我找到了可能的解决方法

Workaround plnkr

现在我想知道是否有更方便的方式来接待孩子？

Answer 1

根据您的plunker，当您使用@ContentChildren时，您似乎尝试使用@ViewChildren访问查看子项。这是一个例子：

<强> app.component.html

<ng-container *ngTemplateOutlet="myTpl"></ng-container>

<ng-template #myTpl>
  <hello></hello>
  <hello></hello>
</ng-template>

<强> app.component.ts

 @Component({
   selector: 'my-app',
   templateUrl: './app.component.html',
   styleUrls: [ './app.component.css' ]
 })
 export class AppComponent implements AfterViewInit {

   @ViewChildren(HelloComponent)
   helloComponets: QueryList<HelloComponent>;

   ngAfterViewInit() {
     // access your components here
     console.log(this.helloComponets)
  }
}

请参阅Stackblitz中的运行示例。

组件模板中的子元素称为“view children”：

我-component.html

<my-view-child></my-view-child>

组件的开始和结束标记之间的子元素称为“内容子元素”：

<my-component> <my-content-child></my-content-child> </my-component>

ContentChildren不会使用NgTemplateOutlet创建子项

1 个答案: