角度材质销毁对话框实例

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; 
});