在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: &lt;div&gt; ... &lt;ng-container *ngTemplateOutlet="ct; context:ctx"&gt;&lt;/ng-container&gt; &lt;/div&gt; })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>