在编写Angular组件时,很容易将ng-template用作ngFor这样的指令的源:
@Component({
selector: 'my-component',
template: `<div>
external content
<div *ngFor="let item of data">
<ng-container *ngTemplateOutlet="itemContentTmpl"></ng-container>
</div>
</div>`
})
export class MyComponent {
@ContentChild('itemContentTmpl') itemContentTmpl: TemplateRef<any>;
}
然后我可以在Angular代码中使用该组件:
<my-component>
<ng-template #itemContentTmpl>
some internal content
</ng-template>
</my-component>
不幸的是,这在混合AngularJS应用程序中不起作用(AngularJS对ng-template
一无所知)。
如何在AngularJS代码中完成这项工作?