是否可以编写可重用的ng-template
?我的很多组件都使用完全相同的 ng-template
。
例如:
<kendo-grid>
<kendo-grid-column field="group">
<ng-template kendoGridEditTemplate let-dataItem="dataItem" let-formGroup="form">
<kendo-dropdownlist #listGroups [data]="groups"
textField="title"
valueField="id"
[valuePrimitive]="true"
[filterable]="true"
[formControl]="form.get('groupId')">
</kendo-dropdownlist>
</ng-template>
</kendo-grid-column>
</kendo-grid>
我不想在我所有的组件中重复这个模板和背后的逻辑。我可以编写自定义组件并将此代码压缩为:
<kendo-grid>
<kendo-grid-column field="group">
<ng-template kendoGridEditTemplate let-dataItem="dataItem" let-formGroup="form">
<my-custom-component [formControl]="form.get('groupId')">
</my-custom-component>
</ng-template>
</kendo-grid-column>
</kendo-grid>
但我想做更多:
<kendo-grid>
<kendo-grid-column field="group">
<ng-template [ngTemplateOutlet]="templateFromAnotherSource">
</ng-template>
</kendo-grid-column>
</kendo-grid>
我找到了 this thread和 this其中描述了 ngTemplateOutlet
,但没有描述如何在多个组件之间共享模板。
最佳答案
问题是 ng-template
必须编译。要了解为什么阅读 Here is what you need to know about dynamic components in Angular .
现在,模板只能作为组件的一部分进行编译。因此,您需要使用此模板定义一个组件,然后您可以使用 viewChild
或指令访问此模板工厂。使用 viewChild
你依赖于 life-cycle hooks and change detection所以我会采用指令方法。这是伪代码:
@Component() {
template: '<ng-template requestor>...</ng-template>'
}
class NgTemplateProviderComponent {
t: TemplateRef;
register(t) {
this.t = t;
}
}
@Directive() {
selector: 'requestor;
}
class TemplateRequestor {
constructor(t: TemplateRef, p: NgTemplateProviderComponent) {
p.register(t);
}
}
要了解有关使用指令获取 templateRef 的方法的更多信息,请阅读 Here is how to get ViewContainerRef before @ViewChild query is evaluated .
然后,您需要访问 NgTemplateProviderComponent
组件工厂,创建它的实例以获取 templateRef
:
class SomeComponent {
constructor(r: ComponentFactoryResolver, i: Injector) {
const f = r.resolveComponentFactory(NgTemplateProviderComponent);
const templateRef =f.create(i).instance.t;
}
}
只有这样您才能使用 ngTemplateOutlet
指令来呈现模板。
关于Angular 可重用模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46072594/