关于breadcrumb面包屑

1.面包屑作用

显示当前页面在系统层级结构中的位置，并能向上返回。

2.面包屑层级结构

标签“nz-breadcrumb”里包含面包屑的内容
标签“nz-breadcrumb-item”里包含页面各个层级里的内容，一个“nz-breadcrumb-item”包含一个层级，“nz-breadcrumb-item”的前后顺序对应层级在结构中的位置。

 <nz-breadcrumb>
      <div class="light"></div><div class="dark"></div>
      <nz-breadcrumb-item>
          <a [routerLink]="['../../../../domain']">域名管理</a>
      </nz-breadcrumb-item>
      
      <nz-breadcrumb-item>
          {{titleName}}
      </nz-breadcrumb-item>
 </nz-breadcrumb> 

3.面包屑动态子级结构

如果同级结构里有多个页面，每个页面有一个名字，在切换页面的时候，将页面名动态的绑定到面包屑相同层级里
“nz-tabset”（完成同级各个页面的标签）里使用(nzSelectedIndexChange)，传入index值，在ts里根据不同的index值，给titleName赋上不同的名字。
HTML里的代码：

 <nz-tabset  (nzSelectedIndexChange)="SelectTabChange($event)">
    <nz-tab nzTitle="基本配置" >
      <app-basic-config></app-basic-config>
    </nz-tab>
    <nz-tab nzTitle="回源配置">
      <app-back-config></app-back-config>
    </nz-tab>
    <nz-tab nzTitle="缓存配置">
      <app-cache-config></app-cache-config>
    </nz-tab>
    <nz-tab nzTitle="HTTPS">
      <app-https></app-https>
    </nz-tab>
  </nz-tabset>

TS里的代码

   SelectTabChange(selectIndex:any){
      if(selectIndex == 0){
        this.titleName="基本配置";
      }else if(selectIndex == 1){
        this.titleName="回源配置";
      }else if(selectIndex == 2){
        this.titleName="缓存配置";
      }else if(selectIndex == 3){
        this.titleName="HTTPS";
      }    
    }