Question

我正在使用角度材质2对话框将项目添加到列表中。我有一个包含列表（表）的组件（AuthorListComponent）。该组件有一个名为getAuthors的函数，它进行休息调用并在模板中呈现表。我还有一个按钮，打开角度材料2对话框，用于添加新项目：

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

我无法弄清楚当对话框中的项目被保存并且对话框关闭时，我希望刷新AuthorListComponent以便显示新添加的项目。我想我必须在某处使用事件发射器来调用getAuthors函数，但是对话框不使用我可以附加事件的指令/ html元素。

这是我的模态服务：

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, 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 { 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

afterAllClosed属性在我使用时帮助了我：

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

Answer 2

要刷新父级，只需在打开对话框之前添加以下代码即可：

const dialogConfig = new MatDialogConfig();
this.dialog.afterAllClosed.subscribe(data=> this.myLoadingFunction() )
this.dialog.open(myDialog , dialogConfig);

关闭myloadingFunction之后立即执行

Answer 3

我明白了。我必须在作者列表组件的openDialog函数中订阅对话框服务。

我改变了这个：

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

到此：

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

Answer 4

如果提交成功，您可以传递表单数据

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

然后您可以将该数据传递到列表中，例如：

public openDialog() {
this.dialogService.openDialog(this.viewContainerRef);
dialogueref.afterClosed().subscribe((data: any) => {
  if (!data) {
    console.log('failed');
  } else {
    this.authors.unshift(data);
  }}

Answer 5

在对话框关闭时刷新父级的最简单方法：

this.dialog.open(DialogComponent)
.afterClosed()
.subscribe(() => this.refreshParent());

Angular 2材质对话框：关闭对话框上的父级

5 个答案: