Angular Material MatDialog 未正确销毁

Posted 2023-05-08

【中文标题】Angular Material MatDialog 未正确销毁

【英文标题】：Angular Material MatDialog not being destroyed propertly

【发布时间】：2019-11-03 13:22:35

【问题描述】：

我在退出时遇到了 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();
  

感谢任何帮助

【参考方案1】：

您可以订阅afterClosed 来销毁您的对话。

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