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