Как пройтивнутри завернутый другим компонентом,?

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>

Внутри app-table.component.ts

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

Любая помощь приветствуется, спасибо заранее!

Answer 1

Вы можете прикрепить объект контекста к EmbeddedViewRef, установив [NgTemplateOutletContext]. [ngTemplateOutletContext] должен быть объект, ключи объекта будут доступны для привязки местным Шаблон объявления.

Измени свой 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>