How to pass an <ngx-datatable-column> inside a wrapped, by another component, <ngx-datatable>?

问题

I have wrapped an <ngx-datatable> component, inside a component of mine let's call it <app-table>, in order to use some standard configs throughout the application. The problem is that I cannot pas an <ngx-datatable-column> inside the and let it pass indside <ngx-datatable>. No errors are thrown, it just ignores the passed element.

I tried <ng-content> and <template> with TemplateRef, with no success. I suspect that <ngx-datatable> does not recognize the passed element because it has already been initialized without it.

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

Inside app-table.component.ts

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

Any help is appreciated, thanks in advance!

回答1:

You can attach a context object to the EmbeddedViewRef by setting [ngTemplateOutletContext]. [ngTemplateOutletContext] should be an object, the object's keys will be available for binding by the local template let declarations.

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

Inside the ts file.Access a TemplateRef instance by placing a directive on an element (or directive prefixed with *)

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

pass value like this

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

来源：https://stackoverflow.com/questions/56233192/how-to-pass-an-ngx-datatable-column-inside-a-wrapped-by-another-component-n