nz-timeline 动态显示icon

我们先介绍一下nz-timeline的基本用法。
使用nz-timeline控件的时候发现一个问题，如果要使用自定义的icon，必须用ng-template的方式。
比如

<nz-timeline>
      <nz-timeline-item>Create a services site 2015-09-01</nz-timeline-item>
      <nz-timeline-item>Solve initial network problems 2015-09-01</nz-timeline-item>
      <nz-timeline-item nzColor="red" [nzDot]="dotTemplate">Technical testing 2015-09-01</nz-timeline-item>
      <nz-timeline-item>Network problems being solved 2015-09-01</nz-timeline-item>
    </nz-timeline>
    <ng-template #dotTemplate>
      <i nz-icon type="clock-circle-o" style="font-size: 16px;"></i>
    </ng-template>

既然是动态显示icon，那么界面上显示的信息肯定是动态的。我们用一个*ngFor来处理。
ts文件里

items=[
{name:"1"}
{name:"2"}
{name:"3"}
{name:"4"}
..........
]

html文件：

<nz-timeline>
    <ng-container *ngFor="let item of items">
      <nz-timeline-item [nzDot]="dotTemplate">{{item.name}}</nz-timeline-item>
   </ng-container>     
</nz-timeline>
<ng-template #dotTemplate>
      <i nz-icon type="clock-circle-o" style="font-size: 16px;"></i>
    </ng-template>

ngSwitch方法

ts文件里

items=[
{name:"1",icon:"icon-1"}
{name:"2",icon:"icon-2"}
{name:"3",icon:"icon-3"}
{name:"4",icon:"icon-1"}
..........
]

html文件：

<nz-timeline>
    <ng-container *ngFor="let item of items">
      <ng-container [ngSwitch]="item.icon">
        <ng-container *ngSwitchCase="'icon-1'">
          <nz-timeline-item [nzDot]="icon_1_temp">{{item.name}}</nz-timeline-item>
        </ng-container>
        <ng-container *ngSwitchCase="'icon-2'">
          <nz-timeline-item [nzDot]="icon_2_temp">{{item.name}}</nz-timeline-item>
        </ng-container>
        <ng-container *ngSwitchCase="'icon-3'">
          <nz-timeline-item [nzDot]="icon_3_temp">{{item.name}}</nz-timeline-item>
        </ng-container>
      </ng-container>
   </ng-container>     
</nz-timeline>
    <ng-template #icon_1_temp>
      <i nz-icon type="clock-circle-1" style="font-size: 16px;"></i>
    </ng-template>
  <ng-template #icon_2_temp>
      <i nz-icon type="clock-circle-2" style="font-size: 16px;"></i>
    </ng-template>
  <ng-template #icon_3_temp>
      <i nz-icon type="clock-circle-3" style="font-size: 16px;"></i>
    </ng-template>

这个时候，虽然只有三种icon的情况，但是代码已经很膨胀了。
不过既然能解决问题，也能很好的读懂代码，也是很不错的解决方法。

这时候需求又变了，产品经理要求增加一个字段，根据不同的type显示不同的颜色。

items=[
{name:"1",icon:"icon-1",type:"1"}
{name:"2",icon:"icon-2",type:"2"}
{name:"3",icon:"icon-3",type:"3"}
{name:"4",icon:"icon-1",type:"1"}
..........
]

再加一层ngSwitch。。。。那代码量一下扩大了n被，以后要是改样式那就很痛苦了。。。。。
我们需要换个思路来决绝。

templateRef方法

ts文件：

@ViewChild("icon_1_temp")  icon1Temp:TemplateRef<any>
@ViewChild("icon_2_temp")  icon2Temp:TemplateRef<any>
@ViewChild("icon_3_temp")  icon3Temp:TemplateRef<any>
convertItems(items){
  items.map(item=>{ 
    if(item.icon=="icon-1"){
      item.temp = this.icon1Temp;
    }else if(item.icon=="icon-2"){
      item.temp = this.icon2Temp;
    }else if(item.icon=="icon-3"){
      item.temp = this.icon3Temp;
    }
    if(item.type=="1"){
      item.color=color1;
    }else if(item.icon=="icon-2"){
      item.color= color2;
    }else if(item.icon=="icon-3"){
      item.color= color3;
    }
  })
}

html文件：

<nz-timeline>
    <ng-container *ngFor="let item of items">
      <nz-timeline-item  [nzDot]="item.temp" [nzColor]="item.color">{{item.name}}</nz-timeline-item>
   </ng-container>     
</nz-timeline>
    <ng-template #icon_1_temp>
      <i nz-icon type="clock-circle-1" style="font-size: 16px;"></i>
    </ng-template>
  <ng-template #icon_2_temp>
      <i nz-icon type="clock-circle-2" style="font-size: 16px;"></i>
    </ng-template>
  <ng-template #icon_3_temp>
      <i nz-icon type="clock-circle-3" style="font-size: 16px;"></i>
    </ng-template>

在获取到数据后，执行一下convertItems方法，就能正常显示了。
这样我们就完成了icon的动态显示。