如何在自定义组件中使用 DxTemplate
How to use DxTemplate inside a custom component
我使用了 DevExtreme 库,如何将 DxTemplate 指令用于包装 DxLookupComponent 的自定义组件?如果可以,如何进行?
我有一个 "wrapper" 可以为 DxComponent(Textbox、Textarea、Datebox 和 Selectbox)添加更多功能,而且效果很好。但是我需要在我的包装器组件中使用 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>
也许您可以将此方法与 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>
如果这能让你入门,请告诉我。
我使用了 DevExtreme 库,如何将 DxTemplate 指令用于包装 DxLookupComponent 的自定义组件?如果可以,如何进行?
我有一个 "wrapper" 可以为 DxComponent(Textbox、Textarea、Datebox 和 Selectbox)添加更多功能,而且效果很好。但是我需要在我的包装器组件中使用 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>
也许您可以将此方法与 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>
如果这能让你入门,请告诉我。