Question

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

我正在尝试将对话框调用重构为一个服务。因此，每次我想要显示一个对话框时都必须写这个：

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

Angular 2材质：动态自定义对话框

1 个答案: