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

Question

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

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

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

Answer 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>

Answer 2

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

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>