Angular借助指令传递模板

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