Angular可重复使用的模板 [英] Angular reusable template

问题描述

是否可以编写可重复使用的ng-template?我的许多组件都使用完全相同的ng-template.
例如:

Is it possible to write reusable ng-template? A lot of my components use exactly the same ng-template.
For example:

<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>

我不想在所有组件中重复此模板和逻辑.我可以编写自定义组件并将此代码缩小为:

I do not want to repeat this template and logic behind in all my components. I could write custom component and shrink this code to:

<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>

我发现此线程和

I found this thread and this which describes ngTemplateOutlet, but not how to share templates between multiple components.

推荐答案

问题是必须编译ng-template.要了解为什么要阅读您需要了解Angular中的动态组件.

The problem is that ng-template has to be compiled. To understand why read Here is what you need to know about dynamic components in Angular.

现在，模板现在只能作为组件的一部分进行编译.因此，您需要使用此模板定义一个组件，然后可以使用viewChild或指令来访问此模板工厂.使用viewChild时，您依赖于生命周期挂钩和变更检测，所以我将采用指令方法.这是伪代码:

Now, a template can only be compiled as part of a component right now. So you need to define a component with this template and then you can get access to this template factory either using viewChild or a directive. With viewChild you depend on life-cycle hooks and change detection so I'd go with directive approach. Here is the pseudocode:

@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的这种方法的更多信息，请阅读

To learn more about this approach of using a directive to get templateRef read Here is how to get ViewContainerRef before @ViewChild query is evaluated.

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

Then, you need to get access to the NgTemplateProviderComponent component factory, create its instance to get the templateRef:

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

只有这样，您才可以使用ngTemplateOutlet指令来呈现模板.

and only then you can use ngTemplateOutlet directive to render the template.

这篇关于Angular可重复使用的模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！