Angular MatTabChangeEvent 不会在页面加载时触发

Question

我正在使用 (selectedChange)="functionName($event)" 获取活动标签页的索引。但是在页面加载时我无法触发此事件，因为它只会在我至少更改选项卡一次以获得包含两个对象 tab 和 [=15= 的 MatTabChangeEvent 的 returned 对象后触发].

在这两个选项卡中，我都有一个带分页的垫子 table。还有一个搜索栏，可以从数据库中搜索数据并将其显示在各自的选项卡中，但这里的问题是，如果页面加载用户直接搜索搜索栏，那么我不知道哪个选项卡当前处于活动状态，所以我的条件语句是根据用户搜索在各自的选项卡中显示数据将给出 Uncaught error 在 this.activeTab.index 不存在。但是一旦用户实际更改了选项卡，那么我就有了活动选项卡索引值，并且我的代码继续正常工作。

那么如何在页面加载时也获取 MatTabChangeObject？

注意：我不能将 MatGroup 与 ViewChild 一起使用，因为它 return 我 MatTabChangeEvent 不像对象

这是我的代码

 if(this.tabEvent.index === 0) {
      $event.map((a: string) => {
        this._printService.getParcelById(this.vId, a, true).subscribe(res => {
          data.push(res);
          this.child.dataLength = $event.length;
        }, err => {
          data = [];
          this._sb.open({
            message : 'Either the parcel id does not exist in the system or it is incorrect',
            type: 'error'
          })
        });
      });
      this.dataSource$ = of(data);
    }
    else if(this.tabEvent.index === 1) {
      $event.map((a: string) => {
        this._printService.getParcelById(this.vId, a, false).subscribe(res => {
          data.push(res);
          this.child.dataLength = $event.length;
        }, err => {
          data = [];
          this._sb.open({
            message : 'Either the parcel id does not exist in the system or it is incorrect',
            type: 'error'
          })
        });
      });
      this.dataSource$ = of(data);
    }

我在函数中发出 eventChange 值，然后将该值分配给类型为 MatTabChangeEvent

的 this.tabEvent 变量

Answer 1

这就是我在我的项目中实现 Mat Tab 的方式

在HTML中：

(selectedChange)="selectedTabChange($event)"

TS:

index = 0;

ngOnInit(): void {
  ...
  this.onTabChanged();
}

selectedTabChange(event) {
  this.index = this.event.index
  this.onTabChanged()
}

onTabChanged() {
  if (this.index==0) {
    ...
  } else if (this.index==1) {
    ...
  }
  ...
}

我什至在某些页面中有按路径导航的选项卡...

那里，我的TS略有变化

constructor(ar: ActivatedRoute) { }

ngOnInit(): void {
  this.ar.queryParams.subscribe(param => {
    if (param.tab) this.index = Number(param.tab); else this.index = 0;
    this.onTabChange()
  })
  ...
}

希望对您有所帮助！

Angular MatTabChangeEvent 不会在页面加载时触发

Angular MatTabChangeEvent does not trigger on page load

angular

angular-material

mat-tab