mat-tab-group - 设置初始标签funcky

Question

我在一个组中有3个标签。 加载对话框时，如果有数据传递给对话框，我想选择第3个选项卡，即：

  ngAfterViewInit() {
    setTimeout(() => {
      if (this.data != null && this.data.imageFileID) {
        this.selectedTabIndex = 2;
      }
    });
  }

selectedTabIndex绑定到选项卡组：

<mat-tab-group #tabs [(selectedIndex)]="selectedTabIndex" ...

因此，问题是，当对话框加载时，会选择第3个选项卡，但选项卡的内容会闪烁并消失。手动选择第二个选项卡是相同的，但第一个选项卡没问题。

我在标签中没有任何逻辑来隐藏整个内容。

就像我说的那样......真是太棒了！

任何人都有线索？

Answer 1

我制作了一个Stackblitz demo来展示问题和解决方案：当以这种方式使用AfterViewInit生命周期挂钩时，您会在检查后更改“＆＃39;表达式”。错误，但之所以没有出现在控制台中是因为setTimeout调用实际上是在Angular的视图之外进行更改而不会导致错误浮出水面。将selectedIndex逻辑移动到OnInit生命周期挂钩（并删除对setTimeout的调用）可以解决您的问题。