时间戳

首页 > 解决方案 > 角度，作为 ng-template 的输入

angular - 角度，作为 ng-template 的输入

问题描述

我有一个工作正常的代码

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

但要做到这一点，我需要 return 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';
    }
  }

标签： angular

解决方案

只需使用@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;
    }
  }
}

推荐阅读