上一篇中使用@Host() @Optional() public hc: HelloComponent感觉不够优雅，也不符合正常数据传递流程。下面是改造后的实现逻辑。在HelloComponent中使用ContentChildren获取所有HelloDirective。@Component({ selector: ‘hs-hello’, template: <div> <ng-container *ngFor="let helloDirective of helloTemplates"> <p>this is hello-for</p> <ng-container *ngTemplateOutlet="helloDirective.template"></ng-container> </ng-container> </div> })export class HelloComponent { @ContentChildren(HelloDirective) helloTemplates: QueryList<HelloDirective>;}HelloDirective中将template向外暴露，借助指令传递TemplateRef,同时指令也起到了分类模板的作用@Directive({ selector: ‘[hsHello]’})export class HelloDirective { constructor( public template: TemplateRef<any> ) {}}示例<hs-hello> <ng-template hsHello> <p>this is hello-1</p> </ng-template> <ng-template hsHello> <p>this is hello-2</p> </ng-template> <ng-template hsHello> <p>this is hello-3</p> </ng-template></hs-hello>