angular，用作ng-template的输入

Question

我有一个运行良好的代码

<nz-timeline  >
  <nz-timeline-item
    *ngFor="let event of this.events"
    [nzColor]="getColorForEvent(event.eventType)"
    [nzDot]="event.eventType == 'C' ? dotCreate
      :event.eventType == 'M' ? dotMail
      :event.eventType == 'P' ? dotPhone : '' "
  >{{event.sentDate | date: 'yyyy-MM-dd HH:mm'}} - {{event.subject}}</nz-timeline-item>
</nz-timeline>

<ng-template #dotCreate>
  <i nz-icon nzType="caret-down" style="font-size: 16px;"></i>
</ng-template>
<ng-template #dotMail>
  <i nz-icon nzType="mail" style="font-size: 16px;"></i>
</ng-template>
<ng-template #dotPhone>
  <i nz-icon nzType="phone" style="font-size: 16px;"></i>
</ng-template>

我想提供更多的案例并编写更干净的代码，比如

[nzDot]="getIconForEvent(event.eventType)"

但是要做到这一点，我需要返回TemplateRef<any>。

这个函数的实现应该是什么样子？

如何用ng-template #dotCreate连接dotCreate

  getIconForEvent(eventType: string): TemplateRef<any> {
    switch (eventType) {
      case 'C':
        return 'dotCreate';
      case 'P':
        return 'dotPhone';
      case 'M':
        return 'dotMail';
      case 'E':
        return 'dotMail';
      default:
        return 'dotMail';
    }
  }

Answer 1

只需使用@ViewChild装饰器就可以访问component.ts文件中的ng-template，就像这样：

export class MyComponent {
  @ViewChild('dotCreate') dotCreate: TemplateRef<any>;
  @ViewChild('dotPhone') dotPhone: TemplateRef<any>;
  @ViewChild('dotMail') dotMail: TemplateRef<any>;

  getIconForEvent(eventType: string): TemplateRef<any> {
    switch (eventType) {
      case 'C':
        return this.dotCreate;
      case 'P':
        return this.dotPhone;
      case 'M':
      case 'E':
      default:
        return this.dotMail;
    }
  }
}