Angular中ngTemplateOutlet和指令结合使用

guanyj
在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>
阅读 1.3k

如今就是个弟弟

8 声望
1 粉丝
0 条评论

如今就是个弟弟

8 声望
1 粉丝
文章目录
宣传栏