角度材質銷燬對話框實例

Question

是否有合適的方式銷燬由對話框創建的組件實例？ 當我關閉對話框 - 組件實例不設置：

import { Component, OnInit, Input, Output, EventEmitter, Inject } from '@angular/core'; 
import { MdDialog, MdDialogRef, MD_DIALOG_DATA } from '@angular/material'; 

@Component({ 
    selector: 'basket', 
    templateUrl: './basket.component.html', 
    styleUrls: ['./basket.component.css'] 
}) 
export class BasketComponent implements OnInit { 
    @Input() Product: any; 
} 

@Component({ 
    selector: 'basket-dialog', 
    template: '<div><basket [Product]="Product"></basket></div>' 
}) 
export class BasketDialogComponent implements OnInit { 
    Product: any; 
    constructor(public dialogRef: MdDialogRef<BasketComponent>, 
     @Inject(MD_DIALOG_DATA) public productData: any) { } 


    ngOnInit() { 
     this.Product = this.productData; 
     this.say(); 
    } 

    say() { 
     setTimeout(() => this.say(), 1000); 
     console.log('test'); 
    } 
} 

創建對話框：

let ordersDialog = this.dialog.open(BasketDialogComponent, { 
    data: product 
}); 
ordersDialog.afterClosed().subscribe(x => { 
    // something like: orderDialog.componentInstance.dispose(); 
}); 

對話框被關閉後也仍正在執行say()方法。

Answer 1

你應該關心自己處置setTimeout：

export class BasketDialogComponent implements OnInit, OnDestroy { 

    timeoutId; 

    say() { 
    this.timeoutId = setTimeout(() => this.say(), 1000); 
    console.log('test'); 
    } 

    ngOnDestroy() { 
    if (this.timeoutId) { 
     clearTimeout(this.timeoutId); 
    } 
    } 
} 

Plunker Example

Answer 2

我處理我的對話接近這樣了。只需將打開的對話框引用設置爲空。

let ordersDialog = this.dialog.open(BasketDialogComponent, { 
    data: product 
}); 
ordersDialog.afterClosed().subscribe(x => { 
    ordersDialog = null; 
});