javascript - Hur man använder context i *ngTemplateOutlet med anpassad Direktív i Angular med Material Tables

Använt ramverk: Angular 8 med Material Design

Jag har gjort en tabellmall för att återanvända mina strukturer i olika komponenter, så att jag inte behöver bygga om den igen. Tabellen kan användas och modifieras i varje komponent och i skrivbordsvy ser den ut som jag förväntade mig. Nu har jag lagt till en mobilhuvudrad som borde se annorlunda ut och jag hoppades att användning av *ngTemplateOutlet med en "isMobile"-egenskap i kontexten skulle lösa mitt problem. Men i komponenten får jag bara data, inte kontexten!?

Har någon en idé för att lösa detta?

Använde ng-template i min komponent, där jag använder min tabell-komponent, men den visar ingenting. Att använda ng-container visar mig de tillhandahållna uppgifterna.

Del av min mall-tabell:

<ng-container matColumnDef="{{ headerValue.field }}-filter" *ngFor="let headerValue of headerValues">
<ng-container *ngIf="headerValue.isSearchable">
    <th mat-header-cell *matHeaderCellDef [class.hidden-below-lg]="headerValue.isMobileHeaderRow">
        <trp-input-field
            formControlName="{{ headerValue.field }}"
            placeholder="{{ 'SEARCH' | translate }}"
            class="dark"
        ></trp-input-field>
    </th>
    <td
        mat-cell
        *matCellDef="let element"
        [class.hidden-below-lg]="headerValue.isMobileHeaderRow"
        [innerHTML]="
            (element[headerValue.field] ? element[headerValue.field].toString() : '') | translate
        "
    ></td>
</ng-container>
<ng-container *ngIf="!headerValue.isSearchable">
    <th mat-header-cell *matHeaderCellDef></th>
</ng-container>

i min komponent:

    <app-table-header
    [isSearchable]="true"
    name="{{ 'TARGET_AGREEMENT.STORES.FIELDS.NAME' | translate }}"
    field="name"
    [isMobileHeaderRow]="true"
    width="260px"
>
    <ng-container *appColumnFormat="let targetAgreement">
        {{ targetAgreement.name }} -
        {{ targetAgreement.rmsId }}
    </ng-container>

</app-table-header>

min appColumnFormat-direktiv som används i mitt tabellhuvud-direktiv

@Directive({
selector: '[appColumnFormat]',
})
export class TableColumnFormatDirective {
}

my table-header-Directive

@Directive({
selector: 'trp-table-header',
})
export class TableHeaderDirective {
@Input() public name: string;
@Input() public field: string;
@Input() public width: string;
@Input() public isSearchable = false;
@Input() public isMobileHeaderRow = false;
@Input() public sorting = (_data: any, _sortHeaderId: string): 
string => {
    return '';
};

@ContentChild(TableColumnFormatDirective, { static: false, read: 
TemplateRef })
public template: TemplateRef<any>;
}

Jag förväntar mig att ha ett kontextobjekt i min komponent som --> <td mat-cell *matCellDef="let element; let isMobile" [class.hidden-below-lg]="headerValue.isMobileHeaderRow" [innerHTML]="(element[headerValue.field] ? element[headerValue.field].toString() : '') | translate "></td> eller något

I början följde jag denna handledning: https://blog.jonrshar.pe/2017/May/29/angular-ng-template-outlet.html

Svar #1

Prova detta :

I din app-table-header-komponents vy, använd *ngTemplateOutlet istället för innerHTML

app-bord-rubrik

 <td mat-cell *matCellDef="let element"
        [class.hidden-below-lg]="headerValue.isMobileHeaderRow">
<ng-container *ngTemplateOutlet="template; context: { $implicit: element }"></ng-container>
</td>

Kontexten du skickar i denna mall kommer att rinna ner till din strukturella direktiv.

Relaterade artiklar