上一篇中使用 @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>