NG-ZORRO tabs标签页频繁切换导致组件崩溃的解决方式

解决方式简单睿智，就是加两个计时器。

HTML代码：

<nz-tabset [nzSelectedIndex]="selectedIndex" (nzSelectChange)="chooseTab($event)">
    <!-- tab1 -->
    <nz-tab [nzTitle]="'terminal-patch.name' | translate" [nzDisabled]="dis1">
     ...
    </nz-tab>
    <!--tab2 -->
    <nz-tab [nzTitle]="'terminal-patch.patch-log' | translate" [nzDisabled]="dis2">
      ...
    </nz-tab>
  </nz-tabset>

这里可以看到绑定的是ngzorro内置的一些属性和方法：

• nz-tabset:
  • nzSelectedIndex 获取当前tab页的index
  • nzSelectChange 切换tabs的函数
• nz-tab :
  • nzDisabled - 是否可以点击tab页，用于控制切换

好，TS代码：

  public clickTime1:any = null;  // 定义计时器
  public clickTime2:any = null;
  public dis1:boolean = false;  // 定义切换boolean
  public dis2:boolean = false;

chooseTab (value) {         // 切换的函数 好奇 宝宝们可以log一下value的值是啥
    if (value.index === 0) {
        this.dis2 = true;        // 在切换的到第一页的时候，把第二页的切换按钮禁用，让它不可点
        this.selectedIndex = value.index;
        ...
        this.clickTime1 = setInterval( ()=> {    // 然后在1秒后解禁，强行阻止频繁点击
          this.dis(1) 
        },1000)
    } else if (value.index === 1){    // 同理 
        this.dis1 = true;
        this.selectedIndex = value.index;
        ...
        this.clickTime2 = setInterval( ()=> {
          this.dis(2)
        },1000)
    }
  }
  
  // 取消计时器
  dis (num:number) {
    if (num === 1) {
      this.dis2 = false;
      clearInterval(this.clickTime1);
    } else if (num === 2) {
      this.dis1 = false;
      clearInterval(this.clickTime2);
    }
  }

大概就是这样，欢迎小伙伴们在评论区沟通，提出更好的方法~