角2材質ダイアログ：ダイアログボックスで親をリフレッシュする

Question

角度材質ダイアログボックスを使用して項目をリストに追加しています。私は、リスト（テーブル）を含むコンポーネント（AuthorListComponent）を持っています。このコンポーネントには、残りの呼び出しを行い、テンプレート内の表をレンダリングするgetAuthorsという関数があります。

https://github.com/angular/material2/blob/master/src/lib/dialog/README.md

は私が把握ダイアログ内の項目が保存され、ダイアログが閉じたときであることができない何を、私がしたい：私はまた、新しい項目を追加するための角度材料2ダイアログを開くボタンがあります新たに追加された項目が表示されるようにリフレッシュされるAuthorListComponent私はイベントエミッタをどこかでgetAuthors関数を呼び出すために使用しなければならないと考えていますが、ダイアログにはイベントをアタッチできるディレクティブ/ html要素は使用されません。

これは私のモーダルサービスです：

import { Component, Input, OnInit } from '@angular/core'; 
import { ActivatedRoute, Router } from '@angular/router'; 
import { MdDialogRef } from '@angular/material'; 

import { AuthorService } from './author.service'; 

@Component({ 
    moduleId: module.id, 
    selector: 'author-comp', 
    templateUrl: 'author.component.html' 
}) 

export class AuthorComponent implements OnInit { 
    authorId: number; 
    author = {}; 

    constructor(
     private route: ActivatedRoute, 
     private authorService: AuthorService, 
     private router: Router, 
     public dialogRef: MdDialogRef<AuthorComponent> 
    ) 
    { } 

    ngOnInit() { 
     this.authorId = this.route.snapshot.params['AuthorId']; 
     if (this.authorId) 
     { 
      this.authorService.getAuthor(this.authorId) 
       .then((author) => { 
        this.author = author; 
        }) 
       .catch((error) => { 
        throw ('ngOnInit-getAuthor: ' + error); 
       }); 
     } 
    } 

    saveAuthor(Author: any) { 
     return this.authorService.saveAuthor(Author) 
      .then(() => { 
       this.dialogRef.close(); 
      }) 
      .catch(error => { 
       throw ('saveAuthor-component: ' + error); 
      }); 
    } 
} 

これは、ダイアログが開いているところから、著者リストコンポーネントは次のとおりです：

import { Observable } from 'rxjs/Rx'; 
import { AuthorComponent } from '../author/author.component'; 
import { MdDialogRef, MdDialog, MdDialogConfig } from '@angular/material'; 
import { Injectable, ViewContainerRef } from '@angular/core'; 

@Injectable() 
export class DialogService { 

    constructor(private dialog: MdDialog) { } 

    public openDialog(viewContainerRef: ViewContainerRef): Observable<boolean> { 
     let dialogRef: MdDialogRef<AuthorComponent>; 
     let config = new MdDialogConfig(); 
     config.viewContainerRef = viewContainerRef; 
     config.disableClose = true; 
     config.width = '600px'; 
     dialogRef = this.dialog.open(AuthorComponent, config); 
     return dialogRef.afterClosed(); 
    } 
} 

これは、ダイアログでロードされる著者コンポーネントがあります

import { Component, OnInit, ViewContainerRef } from '@angular/core'; 
import { ActivatedRoute, Router } from '@angular/router'; 

import { AuthorService } from './index'; 
import { DialogService } from '../shared/dialog.service'; 


@Component({ 
    moduleId: module.id, 
    selector: 'author-list-comp', 
    templateUrl: 'author-list.component.html' 
}) 

export class AuthorListComponent implements OnInit { 
    authors: any[]; 

    constructor(
    private authorService: AuthorService, 
    private dialogService: DialogService, 
    private viewContainerRef: ViewContainerRef, 
    private router: Router 
) 
    {} 

    getAuthors() { 
     this.authorService.getAuthors() 
     .then((authors) => { 
     this.authors = authors;   
     }) 
     .catch((error) => { 
     throw('ngOnInit-getAuthors: ' + error) 
     }) 
    } 

    ngOnInit(){ 
    this.getAuthors(); 
    } 

    public openDialog() { 
    this.dialogService.openDialog(this.viewContainerRef); 
    } 
} 

私は、上記のコンポーネントのgetAuthors関数を呼び出す必要があると思いますダイアログサービスまたは作成者コンポーネント。私が考えたもう一つの方法は、何とかrouter.navigateを使うことでした。

ご協力いただきましてありがとうございます。

Answer 1

私はそれを理解しました。著者リストコンポーネントのopenDialog関数でダイアログサービスを購読する必要がありました。これに

public openDialog() { 
    this.dialogService.openDialog(this.viewContainerRef); 
    } 

：

は、私はこれを変更し

私が使っていたとき afterAllClosedプロパティは、私を助けた

public openDialog() { 
    this.dialogService 
     .openDialog(this.viewContainerRef) 
     .subscribe(result => { 
      this.getAuthors(); 
     }); 
    } 

Answer 2

：

constructor(public dialog: MdDialog) { 
    dialog.afterAllClosed 
    .subscribe(() => { 
    // update a variable or call a function when the dialog closes 
     this.viewMode = 'loadingPage'; 
     this.getUserData(); 
    } 
); 
} 

openDialog(){ 
    this.dialog.open(
    DialogComponent 
); 
};