angular - 根据类型渲染动态模板

Question

我真的很喜欢 Dynamic template based on value rather than variable with ngTemplateOutlet 提供的答案。但是我无法让它工作。简化示例:

export class A {
}

export class MyComponent 
  implements OnInit {

  public controls$ = Observable<any[]>([]);

  ngOnInit() {
    this.controls$.next([new A()]);
  }

  public getTypeName(control: any) {
    if (control instanceof A) {
      return "AControl";
    }
    return "";
  }
}

模板:

<div *ngFor="let control of control$ | async">
  {{ getControlType(control) }}
</div>

产量:

AControl

到目前为止一切顺利。当我添加模板时，出现异常:

<div *ngFor="let control of control$ | async">
  {{ getControlType(control) }}
  <ng-container 
    [ngTemplateOutlet]="getControlType(control)"
    [ngTemplateOutletContext]="{ control: control }">
  </ng-container>
</div>

<ng-template 
  #AControl 
  let-item="control">A Control</ng-template>

抛出:

templateRef.createEmbeddedView is not a function

我不确定需要更改哪些内容才能使模板 #AControl 在容器中呈现。

Answer 1

似乎[ngTemplateOutlet]="getControlType(control)"是罪魁祸首。我没有看到 getControlType() 的代码，但我认为它返回一个 s 字符串，而它应该是一个 TemplateRef 对象。除非您使用 ChangeDetectionStrategy.OnPush，否则在模板中调用函数并不是一个好主意，因此我建议在模板中使用 switch 语句。尽管如此，随着

@ViewChild("AControl", {static: true})
AControl: TemplateRef<any>;

您可以访问 .ts 文件中的模板并从 getControlType 函数返回