Angular Material MatDialog не уничтожается должным образом

У меня проблемы с тем, что мое представление 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();
  }

Любая помощь приветствуется


person Roka    schedule 20.06.2019    source источник


Ответы (1)


Вы можете подписаться afterClosed, чтобы уничтожить ваш диалог.

dialogRef.afterClosed().subscribe(x => {
   dialogRef = null;
});
person Hien Nguyen    schedule 20.06.2019