Question

我有angular 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]; ...

Forked Stackblitz

Angular 7中的动态和多个ngTemplate

1 个答案: