我正在使用角度材料2对话框将项目添加到列表中 . 我有一个包含列表(表)的组件(AuthorListComponent) . 该组件有一个名为getAuthors的函数,它进行休息调用并在模板中呈现一个表 . 我还有一个按钮,用于打开角度材质2对话框,用于添加新项目:
https://github.com/angular/material2/blob/master/src/lib/dialog/README.md
我无法弄清楚的是,当保存对话框中的项目并关闭对话框时,我希望刷新AuthorListComponent,以便显示新添加的项目 . 我想我必须在某处使用事件 Launcher 来调用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 .
任何帮助表示赞赏!
2 回答
afterAllClosed属性在我使用时帮助了我:
我想到了 . 我必须在作者列表组件的openDialog函数中订阅对话框服务 .
我改变了这个:
对此: