angular material 带有选项卡的对话框 - 如果在加载对话框时切换选项卡，则选项卡的内容不可见

Question

我正在尝试打开一个对话框，该对话框的选项卡组包含 2 个选项卡，并在对话框加载时立即切换到第二个选项卡。

问题是标签页切换了，但是标签页的内容不可见。它存在，但在右侧看不见。我认为当我立即切换标签时，将它移动到视图中的动画不会发生。

如果我切换回 Tab1，然后再切换到 Tab2，我可以看到它的内容。

我正在使用秋田犬，我将 activeTabIndex 绑定到状态。

这是一个堆栈闪电战： https://stackblitz.com/edit/angular-w8svt3

Answer 1

我不知道你打算只从外面切换标签页是什么意思。

最简单的方法是更新 ngOnInit

上的选项卡

  ngOnInit() {
    this.appService.updateTabIndex(1);
  }

作为额外的解决方法，您可以尝试添加一个 setTimeout 调用。例如：

   this.dialog.open(DialogComponent, config).afterOpened().subscribe(_ => {
      setTimeout(() => this.appService.updateTabIndex(1), 0);
      console.log('updateTabIndex');
    });

angular material 带有选项卡的对话框 - 如果在加载对话框时切换选项卡，则选项卡的内容不可见

angular material dialog with tabs - content of tab is not visible if switching tab when the dialog loads

angular

tabs

dialog

akita