脚本宝典收集整理的这篇文章主要介绍了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>@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>
以上是脚本宝典为你收集整理的Angular中ngTemplateOutlet和指令结合使用全部内容，希望文章能够帮你解决Angular中ngTemplateOutlet和指令结合使用所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。