Angular借助指令传递模板

上一篇中使用 @Host() @Optional() public hc: HelloComponent感觉不够优雅，也不符合正常数据传递流程。下面是改造后的实现逻辑。
在HelloComponent中使用ContentChildren获取所有HelloDirective。

@Component({
    selector: 'hs-hello',
    template: `
        

            
                
this is hello-for
                
            
        
    `
})
export class HelloComponent {
    @ContentChildren(HelloDirective) helloTemplates: QueryList;
}

HelloDirective中将template向外暴露，借助指令传递TemplateRef,同时指令也起到了分类模板的作用

@Directive({
    selector: '[hsHello]'
})
export class HelloDirective {

    constructor(
        public template: TemplateRef
    ) {}
}

示例

    
        
this is hello-1
    

    
        
this is hello-2
    

    
        
this is hello-3