Angular 2 Material：动态自定义对话框

Question

我在显示模态时使用 Angular 2 Material 的对话框组件。我创建了一个具有 ng-content 的基本模态 (MatModalComponent) 和将包含在基本的 ng-content 中的自定义子模态 (ReserveSeatModalComponent)。

我正在尝试将我的对话调用重构为一项服务。所以每次我想显示一个对话框时都必须写这个：

        let dialogRef = this.dialog.open(ReserveSeatModalComponent, {  
            width: '250px',
            data: {
                seat: this.selectedSeat
            }
        });

我现在希望在服务内的 open() 方法上调用它。我不确定我将如何实现这一点。我从Tarik's implementation 开始，但我不知道如何将子模态组件传递给服务，因此它将成为 dialogRef 使用的组件。

Answer 1

刚刚让我的代码为此工作。

这是我的模态服务：

export class ModalService {

    constructor(private dialog: MatDialog) { }

    public invoke(modalComponent: any, modalData: any): Observable<any> {
        let dialogRef = this.dialog.open(modalComponent, {
            width: '250px',
            data: modalData
        });

        return dialogRef.afterClosed();
    }
}

我这样调用服务：

    this.modalService
        .invoke(VacateSeatModalComponent,
        {
            selectedSeat: this.selectedSeat,
            seatingInfo: seatInfo
        })
        .subscribe(result => {
            if (result)
                this.vacateSeat();
        });