当 selectedIndex 异步更改时，mat-dialog 上的 Mat-tabs 不起作用答案

【问题标题】：Mat-tabs on mat-dialog not working when selectedIndex change asynchronously当 selectedIndex 异步更改时，mat-dialog 上的 Mat-tabs 不起作用
【发布时间】：2020-10-20 20:54:57
【问题描述】：

在 mat-dialog 上渲染 mat-tabs 时遇到问题。我使用 selectedIndex 动态选择选项卡的索引，我想异步更改它，例如服务器端调用或 setTimeout。但它不起作用。选项卡正文不显示该索引的内容。我在 stackblitz 中重现它。

https://stackblitz.com/edit/mat-tabs-on-mat-dialog-problem

N.B：我知道它可以使用 500 毫秒的 setTimeout 来解决。但这不是预期的解决方案。

【问题讨论】：

标签： angular angular-material mat-tab

【解决方案1】：

您可以通过添加*ngIf 指令来确保内容的显示。这确保了内容的显示，但它会让你失去一开始的动画：

<mat-tab-group *ngIf="selectedIndex!=undefined" [selectedIndex]="selectedIndex">
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

【讨论】：

它几乎解决了我的问题。但问题是，如果我初始化索引并在 setTimeout 之后更改它，它就会进入空白状态。你能告诉我为什么会这样吗？
如果你初始化selectedIndex，它就不是undefined，*ngIf指令中的条件总是true。你为什么要完全初始化它？也许对您来说显示第一个选项卡然后将动画显示到第二个选项卡很重要？
您可以在组件中使用loaded: boolean = false; 变量，在异步调用后设置为true 并在*ngIf 中使用？
其实我想知道为什么标签的行为很奇怪？我实际上知道解决方案。我已经在问题中提到了一种解决方案。但我想知道原因。

【解决方案2】：

您可以通过从app.component.ts 传递selectedIndex 来解决问题

import { Component, OnInit } from '@angular/core';
import {MatDialog} from '@angular/material/dialog';
import { DialogComponent } from './dialog/dialog.component';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit{

  public index = { selectedIndex: 0 }

  constructor(public dialog: MatDialog) {}

  ngOnInit() {
    setTimeout(() => this.index.selectedIndex = 1, 100)
  }

  openDialog() {
    const dialogRef = this.dialog.open(DialogComponent, { data: this.index });

    dialogRef.afterClosed().subscribe(result => {
      console.log(`Dialog result: ${result}`);
    });
  }
}

在DialogComponent 中，您可以通过注入 MAT_DIALOG_DATA 来获取数据

  constructor(@Inject(MAT_DIALOG_DATA) public data) { }

最后，这是dialog.component.html的代码示例

<mat-tab-group [selectedIndex]="data.selectedIndex">
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

【讨论】：

但我不想从父组件传递索引。我有一种情况，索引将根据 http 调用更改，它来自对话框组件。