角度可重用模板

Question

是否有可能写出可重用的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>

我发现这个线程和这个描述ngTemplateOutlet,而不是如何共享多个组件之间的模板.

Answer 1

问题是ng-template必须编译.了解原因阅读以下是您需要了解的有关Angular中动态组件的内容.

现在,模板只能立即编译为组件的一部分.因此,您需要使用此模板定义组件,然后您可以使用viewChild或指令访问此模板工厂.随着viewChild你依赖于生命周期挂钩和变化检测,所以我会用指令的方式去.这是伪代码:

@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的此方法的更多信息,请阅读以下是在评估@ViewChild查询之前如何获取ViewContainerRef.

然后,您需要访问NgTemplateProviderComponent组件工厂,创建其实例以获取templateRef:

class SomeComponent {
   constructor(r: ComponentFactoryResolver, i: Injector) {
       const f = r.resolveComponentFactory(NgTemplateProviderComponent);
       const templateRef =f.create(i).instance.t;
   }
}

只有这样你才能使用ngTemplateOutlet指令来渲染模板.