Динамический и множественный шаблон ngTemplate в Angular 7

Question

У меня угловое 7 приложение.И у меня есть gridComponent, и я использую его от app.component.html.Я хочу создать несколько столбцов динамически из моего app.component.ts.И поэтому я создаю свои коды, как показано ниже.Но в моей сетке столбцы student и manager пустуют.Что может быть причиной этой проблемы? Я добавил желаемую окончательную версию картины в конец страницы.

STACKBLITZ

Answer 1

Это должно быть просто с помощью пользовательской директивы, такой как:

cell-template.directive.ts

import { Directive, Input, TemplateRef } from '@angular/core';

@Directive({
  selector: 'ng-template[cellTemplate]'
})
export class CellTemplateDirective {
  @Input('cellTemplate') name: string;

  constructor(public template: TemplateRef<any>) {}
}

Имея эту директиву, вы можете определять шаблоныдля типов:

<app-grid>
  <ng-template let-rowData="rowData" cellTemplate="student">student {{rowData}}</ng-template>
  <ng-template let-rowData="rowData" cellTemplate="manager">manager {{rowData}}</ng-template>
</app-grid>

Также ваш компонент сетки должен знать, как обрабатывать определенный шаблон:

grid.component.ts

@ContentChildren(CellTemplateDirective) cellTemplates: QueryList<CellTemplateDirective>;

cellTemplatesMap: { [key: string]: TemplateRef<any> };

...

ngAfterContentInit() {
  this.cellTemplatesMap = this.cellTemplates.reduce((acc, cur) => {
    acc[cur.name] = cur.template;
    return acc;
  }, {});
}

Я запрашиваю созданную раннюю директиву с помощью декоратора @ContentChildren, а также преобразую этот массив в простую карту значений ключей, чтобы избежать избыточных вычислений.

Последним решением является предоставление правильного шаблона в html:

grid.component.html

<td *ngIf="column.type==='template'">
    <ng-content *ngTemplateOutlet="cellTemplatesMap[column.columnName]; ...

Разветвленный стек-блиц