乐趣区

Angular中ngTemplateOutlet和指令结合使用

在 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>

退出移动版