angular, функция как вход для ng-шаблона

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

Как должна выглядеть реализация этой функции?

Как связать dotCreate с ng-template #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 decorator, чтобы получить доступ к ng-template в вашем файле component.ts, вот так:

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