Question

我在我的一个组件内包装了一个<ngx-datatable>组件，我们将其称为<app-table>，以便在整个应用程序中使用一些标准配置。问题是我无法在<ngx-datatable-column>内粘贴<ngx-datatable>并使其通过内部<ng-content>。不会抛出任何错误，它只会忽略传递的元素。

我用<template>尝试了TemplateRef和<ngx-datatable>，但没有成功。我怀疑<app-table [rows]="rows" [limit]="page.limit" [columns]="columns"> <ng-container content> <ngx-datatable-column name="Actions"> <ng-template let row="row" let-value="value" ngx-datatable-cell-template> <button>...</button> <button>...</button> <ng-template> </ngx-datatable-column> </ng-container> </app-table>无法识别所传递的元素，因为没有它就已经初始化了。

.
.
<ngx-datatable [configs]="...configs...">
    <!-- The column is never displayed in here -->
    <ng-content select="[content]"></ng-content>
</ngx-datatable>

内部app-table.component.ts

    let busPhone = "7355535586"
    if let url = URL(string: "tel://\(busPhone)"), UIApplication.shared.canOpenURL(url) {
        if #available(iOS 10, *) {
            UIApplication.shared.open(url)
        } else {
            UIApplication.shared.openURL(url)
        }
    }

感谢您的帮助，谢谢！

Answer 1

您可以通过设置将上下文对象附加到EmbeddedViewRef [ngTemplateOutletContext]。 [ngTemplateOutletContext]应该是对象，该对象的键可用于本地绑定模板let声明。

更改您的html。

<ngx-datatable [configs]="...configs...">
    <!-- The column is never displayed in here -->
       <ng-template [ngTemplateOutlet]="itemTemplate" *ngIf="itemTemplate" 
        [ngTemplateOutletContext]="{ $implicit: option }"></ng-template>
</ngx-datatable>

在ts文件中。通过在元素上放置指令（或以*开头的指令）来访问 TemplateRef 实例

  @ContentChild(TemplateRef) itemTemplate: TemplateRef<any>;

通过这样的值

<app-table [rows]="rows"
           [limit]="page.limit"
           [columns]="columns">
    <ng-template>
        <ngx-datatable-column name="Actions">
            <ng-template let row="row"
                         let-value="value" 
                         ngx-datatable-cell-template>
                <button>...</button>
                <button>...</button>
            <ng-template>
         </ngx-datatable-column>
    </ng-template>
</app-table>

如何在另一个组件包装的<ngx-datatable>中传递<ngx-datatable-column>？

1 个答案: