Angular 可重复使用模板

2024-03-14

是否可以编写可重用的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>

I found 这个线程 https://stackoverflow.com/questions/38550255/switch-html-templates-dynamically-during-runtime-on-user-action-in-angular-2 and 其中描述了ngTemplateOutlet,但不是如何在多个组件之间共享模板。


问题是ng-template必须编译。理解为什么要阅读以下是您需要了解的有关 Angular 动态组件的知识 https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e.

现在,模板只能作为组件的一部分进行编译。因此,您需要使用此模板定义一个组件,然后您可以使用以下方式访问此模板工厂viewChild或指令。和viewChild你依赖生命周期挂钩和变更检测 https://blog.angularindepth.com/everything-you-need-to-know-about-change-detection-in-angular-8006c51d206f所以我会采用指导性方法。这是伪代码:

@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 https://blog.angularindepth.com/here-is-how-to-get-viewcontainerref-before-viewchild-query-is-evaluated-f649e51315fb.

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

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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular 可重复使用模板 的相关文章

随机推荐