Angular 2：将字符串传递给 ngTemplateOutlet答案

【问题标题】：Angular 2 : Pass string to ngTemplateOutletAngular 2：将字符串传递给 ngTemplateOutlet
【发布时间】：2018-10-03 04:48:25
【问题描述】：

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

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：这个问题可能有更好的解决方案。不要犹豫分享:)谢谢！

【问题讨论】：

你试过*ngTemplateOutlet="field" 吗？
是的。同样的问题...它仍然被识别为字符串而不是 templateRef
我找到了一种解决方法：从 TS 中的函数传递引用：@ViewChild('name') name: ElementRef; getTemplateFromName(string) { return this.name } 名称模板
或者你可以使用子组件来替换 ng-container 元素
谁没有得到答案，请在此处阅读以获取更多说明blog.angular-university.io/…

标签： angular templates angular2-template

【解决方案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>

这不需要子组件。

【讨论】：

极好的解决方案。
这真是太棒了！谢谢！
啊哈好主意拉齐夫

【解决方案2】：

您可以在父组件中创建模板，并将模板列表作为输入传递给子组件：

<my-child [templates]="{'name': name, 'created_at': created_at, 'person_age': person_age}"></my-child>

<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>

然后你可以简单地使用模板：

<ng-container *ngFor="let f of fields"> 
   <ng-container *ngTemplateOutlet="templates[f]">
   </ng-container>
</ng-container>

Here is a stackblitz running code.

【讨论】：

我最喜欢的答案。谢谢

【解决方案3】：

有关使用打字稿传递参考的解决方法，请参见注释。我只是想为那些有同样问题的人提第二种解决方案：使用 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>

【讨论】：

【解决方案4】：

你会试试这个吗？（对我有用）：

export class YourClass {
  @ViewChild('ciao') ciao: TemplateRef<any>;
  @ViewChild('ciao2') ciao2: TemplateRef<any>;
  
  fields: TemplateRef<any>[];

  constructor () {
    
    this.fields = [this.ciao, this.ciao2];

  }
}

<ng-template #ciao></ng-template>
<ng-template #ciao2></ng-template>

【讨论】：

在视图初始化之前它们都是空的。您必须使用ngOnInit 来获取引用。