Angular 2：将字符串传递给ngTemplateOutlet

Question

我正在尝试为字符串数组的每个字段传递不同的模板。

TS

export class MyComponent {
  fields = ['name', 'person.age', 'created_at', ...]
}

的HTML

<div *ngFor="let field of fields">
   <ng-container [ngTemplateOutlet]="field">

   </ng-container>
</div>

<ng-template #name>
   Name template
</ng-template>

<ng-template #created_at>
    Created at template
</ng-template>

<ng-template #person.age>
     person.age template
</ng-template>

我显然会收到错误，因为ngTemplateOutlet期望使用TemplateRef而不是字符串。但是，如何动态地将其传递给字符串以引用正确的模板呢？

错误：templateRef.createEmbeddedView不是函数

PS：它们可能是解决此问题的更好方法。不要犹豫分享:)谢谢！

Answer 1

您可以这样写：

<div *ngFor="let field of fields">
   <ng-container *ngTemplateOutlet="{'name': name, 'created_at': created_at, 
     'person_age': person_age}[field]">

   </ng-container>
</div> 

<ng-template #name>
    Name template
</ng-template>

<ng-template #created_at>
    Created at template
</ng-template>

<ng-template #person_age>
     person.age template
</ng-template>

这不需要子组件。

Answer 2

请参阅注释以了解使用打字稿传递引用的解决方法。我只是想为那些有同样问题的人提第二个解决方案：使用 ngSwitch :)

  <div *ngFor="let field of fields">
        <div [ngSwitch]="field">
              <div *ngSwitchCase="'name'">
                   {{ field }}
              </div>
              <div *ngSwitchCase="'person.age'">
                   {{ var[field] }} is my age
              </div>
              <div *ngSwitchDefault>
                   fallback
               </div>
        </div>