Угловой материал 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;
});