Angular中ngTemplateOutlet和指令结合使用

在kendo的Grid组件中,可以看到有大量类似kendoGridCellTemplate这样的指令。 那么这些指令是怎样实现的。
    
        
            
                ....
            
        
    
  • 下面是实现 在HelloComponent组件中使用 helloTemplate指令的代码
@Component({
    selector: 'hs-hello',
    template: `
        
...
` }) export class HelloComponent { ctx = { $implicit: 'aaa', hello: 'bbb' }; @ContentChild('cellTemplate') ct: TemplateRef; constructor() {} }
    
@Directive({
    selector: '[helloTemplate]',
})
export class HelloTemplateDirective implements OnInit {

    constructor(
        private template: TemplateRef,
        @Host() @Optional() public hc: HelloComponent
    ) {

    }

    ngOnInit() {
        this.hc.headerTemplate = this.template;
    }
}
    
        
            

{{dataItem}} -- {{hello}}

你可能感兴趣的:(angular4)