如何在自定义组件中使用 DxTemplate答案

【问题标题】：How to use DxTemplate inside a custom component如何在自定义组件中使用 DxTemplate
【发布时间】：2019-10-06 18:59:38
【问题描述】：

我使用了 DevExtreme 库，如何将 DxTemplate 指令用于包装 DxLookupComponent 的自定义组件？如果可以，如何进行？

我有一个“包装器”，它为 DxComponent（文本框、文本区域、日期框和选择框）添加了更多功能，并且效果很好。但是我需要在我的包装组件中使用 DxTemplate 指令来将模板显示到 DxLookupComponent 中。

我的外观代码如下所示：

<app-dx-lookup-wrapper ...(here I have some properties that will be pass to the DxLookupComponent )>

        <div *dxTemplate="let data of 'titleTemplate'">
        // How to proceed here
        </div>
        <div *dxTemplate="let data of 'itemTemplate'">
        // How to proceed here
        </div>
        <div *dxTemplate="let data of 'fieldTemplate'">
        // How to proceed here
        </div>

</app-dx-lookup-wrapper>

在我的包装组件中：

<app-dx-wrapper ...(properties of my wrapper)>
        <dx-lookup ...(here goes properties of the DxLookup)>
            <ng-content></ng-content>
        </dx-lookup>
</app-dx-wrapper>

【问题讨论】：

标签： angular ng-template devextreme-angular

【解决方案1】：

也许您可以通过 ContentChildren 和自定义指令重用这种方法：

首先让我们创建自定义指令 - 也许我找到了这个 here

@Directive({
  selector: "[templateName]"
})
export class TemplateNameDirective {
  @Input() templateName = "";

  constructor(public templateRef: TemplateRef<any>) {}
}

AppDxLookupWrapperComponent.ts：

@ContentChildren(TemplateNameDirective) templates: QueryList<TemplateNameDirective>;

app-dx-lookup-wrapper.component.html:

<div *ngFor="let template of templates; let i = index">
  <ng-template
    *dxTemplate="let item of template.templateName"
    [ngTemplateOutletContext]="{ item: item }"
    [ngTemplateOutlet]="template.templateRef"
  ></ng-template>
</div>

然后你可以像这样使用这个“模板”：

<app-dx-lookup-wrapper>
  <ng-template let-item="item" templateName="titleTemplate">
        {{yourFunction(item)}}
  </ng-template>
  ... other ng-templates here
</app-dx-lookup-wrapper>

如果这能让你开始，请告诉我。

【讨论】：