Angular中ngTemplateOutlet和指令结合使用-优快云博客

本文深入探讨了kendo Grid组件中kendoGridCellTemplate指令的实现原理，通过示例展示了如何在Angular环境中使用自定义指令与组件进行交互，特别关注了如何利用ngTemplateOutlet和ContentChild来实现动态模板加载。

在kendo的Grid组件中，可以看到有大量类似kendoGridCellTemplate这样的指令。那么这些指令是怎样实现的。

    <kendo-grid ...>
        <kendo-grid-column ...>
            <ng-template kendoGridCellTemplate let-dataItem let-i="index">
                ....
            </ng-template>
        </kendo-grid-column>
    </kendo-grid>

下面是实现在HelloComponent组件中使用 helloTemplate指令的代码

@Component({
    selector: 'hs-hello',
    template: `
        <div>
            ...
            <ng-container *ngTemplateOutlet="ct; context:ctx"></ng-container>
        </div>

    `
})
export class HelloComponent {

    ctx = {
        $implicit: 'aaa',
        hello: 'bbb'
    };

    @ContentChild('cellTemplate') ct: TemplateRef<any>;

    constructor() {}

}

    
@Directive({
    selector: '[helloTemplate]',
})
export class HelloTemplateDirective implements OnInit {

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

    }

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

    <hs-hello>
        <ng-template helloTemplate let-dataItem let-hello="hello">
            <p>{{dataItem}} -- {{hello}}</p>
        </ng-template>
    </hs-hello>