角材料MatDialog未被正确销毁

Question

我退出我的MatDialog视图时出现问题，无法正确销毁。 第一次正常工作。 然后退出并再次弹出对话框。 将创建两个叠加层。 第三单击，三个覆盖。 我相信我没有正确地破坏物体或某些东西，但是我在Angular Material网站上找不到任何东西，也没有在互联网上找到任何东西。

正在创建的多个对话框的屏幕截图：

调用对话框的代码：

import { MatDialog } from '@angular/material';

constructor(dialog: MatDialog) {}

const dialogRef = this.dialog.open(StockDetailComponent,
        {
            data: {
                      ticker: ticker, stockDetail: results, intraDayChartAvailable: intraDayChartAvailable,
                      dailyChartAvailable: dailyChartAvailable, weeklyChartAvailable: weeklyChartAvailable,
                      monthlyChartAvailable: monthlyChartAvailable
                  }
        });

在这种情况下，我可以明确采取措施以确保适当销毁吗？

dialogRef.afterClosed()

对话码：

import { Component, OnInit, Inject} from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA, MatTabChangeEvent } from '@angular/material';

  export class StockDetailComponent {
      public chart: ChartComponent;
      public ticker: string;
      public stockDetail: Stock;
      public intraDayChartAvailable: boolean;
      public dailyChartAvailable: boolean;
      public weeklyChartAvailable: boolean;
      public monthlyChartAvailable: boolean;
      constructor(
        private stockComponentSharedService: StockComponentSharedService,
        public dialogRef: MatDialogRef<StockDetailComponent>,
        @Inject(MAT_DIALOG_DATA) public data: any) {
          this.chart = new ChartComponent();
          this.ticker = data.ticker;
          this.stockDetail = data.stockDetail;
          this.intraDayChartAvailable = data.intraDayChartAvailable;
          this.dailyChartAvailable = data.dailyChartAvailable;
          this.weeklyChartAvailable = data.weeklyChartAvailable;
          this.monthlyChartAvailable = data.monthlyChartAvailable;
          this.intraDayChartAvailable ?      this.generateChart(this.stockComponentSharedService.getCachedStockData(this.ticker, 0),
          this.stockComponentSharedService.getCachedStockLabels(this.ticker, 0)) :
          this.generateChart(this.stockComponentSharedService.getCachedStockData(this.ticker, 1),
          this.stockComponentSharedService.getCachedStockLabels(this.ticker, 1));
       }

  public hideStockDetails(): void {
    this.chart.populateData([], []);
    this.stockComponentSharedService.clearTicker(this.ticker);
    this.dialogRef.close();
  }

任何帮助表示赞赏

Answer 1

您可以订阅afterClosed销毁对话框。

dialogRef.afterClosed().subscribe(x => {
   dialogRef = null;
});