如何区分 Angular MatTabChangeEvent 中的用户事件和代码事件

Question

在调用 API 后，我有一个页面需要设置目标垫选项卡。

当用户更改它时，我需要保存选项卡选择。

但是在事件处理程序中，我无法区分用户事件和代码事件：

模板：

<mat-tab-group disabled [(selectedIndex)]="uiData.currentTab" (selectedTabChange)="switchMode($event)" >
   <mat-tab disabled label="Assignment"></mat-tab>
   <mat-tab disabled label="Allocation"></mat-tab>
</mat-tab-group>

TS代码：

  ngOnInit(): void {
        this.service.getAllData(this.uiData).subscribe(v => {
            this.loading = false;
            if(conditionA){
                this.uiData.currentTab = 1; // will trigger switchMode() even mat tab is disabled
            }
       }, err => {
          this.loading = false;
          this.errorMsg = "failure: " + err;
    });
  }

  switchMode(event: MatTabChangeEvent): void {

    if(!this.loading){   // Async event, doesn't work, I have no way to distinguish user event from code event
      this.validHolder.markAsDirty();  // enable save button
    }else{
      console.log("don't mark dirty");
    }
    
    this.errorMsg= null;
  }

而且我还发现 MatTabChangeEvent 不是一般的 JS 事件并且没有 isTrusted 属性

我是否也想将MatTabGroup添加到myForm中并让我使用emitEvent，但我没有找到添加它的方法。

Answer 1

由特殊标志 currentTabOnInit 修复（它不漂亮，但有效）：

   ngOnInit(): void {
        this.service.getAllData(this.uiData).subscribe(v => {
            this.loading = false;
            if(conditionA){
                this.uiData.currentTab = 1; // will trigger switchMode() even mat tab is disabled
                this.currentTabOnInit= true;
            }
       }, err => {
          this.loading = false;
          this.errorMsg = "failure: " + err;
    });
  }

  switchMode(event: MatTabChangeEvent): void {

    if(this.uiData.currentTabOnInit){
      console.log("don't mark dirty");
      this.uiData.currentTabOnInit = false;
    }else{
      console.log("mark dirty");
      this.validHolder.markAsDirty();  // enable save button
    }
  }