Question

我有Angular 7项目。我写了<ng-template>，它正在发送我的rowData。当我像下面这样写一个ng-template时，一切工作正常。但是，我需要多个ng-template。我尝试了以下类似的方法。但是，我无法执行。我该如何实现？

这很好用

app.grid.component.html

<ng-template pTemplate="body" let-rowData>
  <tr>
    <td *ngFor="let col of Columns" class="ui-resizable-column">
      <span>{{rowData[col.field]}}</span>
    </td>
    <td>
      <ng-template *ngTemplateOutlet="templateRef; context : {rowData : rowData}"></ng-template>
    </td>
  </tr>
</ng-template>

app.grid.component.ts

export class GridComponent implements OnInit {
    @ContentChild(TemplateRef) templateRef: TemplateRef<any>;
  }

mycomponent.html

 <app-grid>
   <ng-template let-rowData="rowData">
       <button type="button" label="Update" (click)="update(rowData)"
   </ng-template>
 </app-grid>

但是我想像下面这样

app.grid.component.html

<ng-template pTemplate="body" let-rowData>
  <tr>
    <td *ngFor="let col of Columns" class="ui-resizable-column">
      <span>{{rowData[col.field]}}</span>
    </td>
    <td>
      <ng-template *ngTemplateOutlet="templateRef; context : {rowData : rowData}"></ng-template>
    </td>
    <td>
      <ng-template *ngTemplateOutlet="templateRef2; context : {rowData : rowData}"></ng-template>
    </td>
  </tr>
</ng-template>

app.grid.component.ts

export class GridComponent implements OnInit {
    @ContentChild(TemplateRef) templateRef: TemplateRef<any>;
    @ContentChild(TemplateRef) templateRef2: TemplateRef<any>;
  }

mycomponent.html

 <app-grid>
   <ng-template let-rowData="rowData" [ngForTemplate]="templateRef">
       <button type="button" label="Delete" (click)="delete(rowData)"></button>
   </ng-template>
   <ng-template let-rowData="rowData" [ngForTemplate]="templateRef2">
       <button type="button" label="Update" (click)="update(rowData)"></button>
   </ng-template>
 </app-grid>

Answer 1

我找到了答案。您可以从此stackblitz链接中看到。（此堆叠闪电击并非完全相同。但是逻辑完全相同。）

STACKBLITZ

Answer 2

您应该使用@ContentChildren而不是@ContentChild

@ContentChildren(TemplateRef) tabs: QueryList<TemplateRef>;

Answer 3

Hasan Ozdemir，您可以为此使用@ViewChild

Component.ts

使用TemplateRef创建模板，然后在要显示的组件中选择模板变量，

 @ViewChild("template1") template1: TemplateRef<any>;
 @ViewChild("template2") template2: TemplateRef<any>;
 selectedTemplate: TemplateRef<any>;

Component.html

在下面的模板中进行一些更改

 <ng-container *ngTemplateOutlet="selectedTemplate; context : {rowData : rowData}"></ng-container>


<app-grid>
   <ng-template #template1>
       <button type="button" label="Delete" (click)="delete(rowData)"></button>
   </ng-template>
   <ng-template #template2>
       <button type="button" label="Update" (click)="update(rowData)"></button>
   </ng-template>
</app-grid>

如果要一次显示多个模板，请使用@ViewChildren而不是@ViewChild。希望这会使您对ngTemplates有所了解：）

更新：

您需要将模板设置为要显示的selectedTemplate。但是我认为您需要显示多个模板，因此需要对html文件进行一些更改。因此，您可以在组件中删除selectedTemplate。

    <td>
      <ng-container *ngTemplateOutlet="template1; context : {rowData : rowData}"></ng-container>
    </td>
    <td>
      <ng-container *ngTemplateOutlet="template2; context : {rowData : rowData}"></ng-container>
    </td>

角度为7的多个NgTemplate

这很好用

但是我想像下面这样

3 个答案: