角度4のmdDialogrefで通常のルーティングを行う方法は？

Question

import { Component, NgModule } from '@angular/core'; 
import { MdDialog } from '@angular/material'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
import { Product } from '../../models'; 
import { ProductService } from '../../services/product.service'; 
import { MdDialogRef } from '@angular/material'; 
@Component({ 
    selector: 'product', 
    template: ` 
    <button mdButton class="md-fab md-primary md-hue-2 addProduct" aria-label="Profile" (click)="openDialog()" > 
     add 
    </button> 
    ` 
}) 
export class ProductComponent { 
    constructor(public dialog: MdDialog, public dialogRef: MdDialogRef<AddProductComponent>) { } 
    openDialog() { 
     this.dialogRef = this.dialog.open(AddProductComponent); 
    } 
} 

@Component({ 
    selector: 'addproduct', 
    template: require('./add.product.html'), 
}) 
export class AddProductComponent { 
    constructor(public productService: ProductService, public dialogRef: MdDialogRef<AddProductComponent>) { 
    } 



    addProduct(product: Product) { 
     this.productService.addProduct(product).subscribe(() => { 
      this.dialogRef.close(); 
      //this.productService.getAllProducts(); 
     }); 
    } 
} 

これは私にとって完璧に動作しますが、私はlogincomponentに

this.router.navigate(['/product']); 

を使用する場合それは私に

ERRORエラーのエラースロー：（約束で）キャッチされない：エラー：MdDialogRefなしプロバイダーを！

私はstackoverflowの上でこの質問を経る：私はMdDialogRefのcomponentInstanceプロパティを使用してみましたが

"No provider for MdDialogRef!"

that tells that we should not use component by <product></product>.But I need to call product component when I get success of login.So How do I do normal routing with mdDialogRef ? 

Answer 1

。素晴らしいです：

import { Component, NgModule } from '@angular/core'; 
import { MdDialog } from '@angular/material'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
import { Product } from '../../models'; 
import { ProductService } from '../../services/product.service'; 
import { MdDialogRef } from '@angular/material'; 
@Component({ 
    selector: 'product', 
    template: ` 
    <button mdButton class="md-fab md-primary md-hue-2 addProduct" aria-label="Profile" (click)="openDialog()" > 
     add 
    </button> 
    ` 
}) 
export class ProductComponent { 
    constructor(public dialog: MdDialog) { } 
    openDialog() { 
     let dialogRef = this.dialog.open(AddProductComponent); 

     //Set the dialogRef property of opened dialog with the obtained ref 
     dialogRef.componentInstance.dialogRef = dialogRef; 
    } 
} 

@Component({ 
    selector: 'addproduct', 
    template: require('./add.product.html'), 
}) 
export class AddProductComponent { 
    public dialogRef:<any> = null; 
    constructor(public productService: ProductService) { 
    } 



    addProduct(product: Product) { 
     this.productService.addProduct(product).subscribe(() => { 
      this.dialogRef.close(); 
      //this.productService.getAllProducts(); 
     }); 
    } 
}