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

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

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

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

我现在希望在服务中的open()方法上调用它 . 我'm not sure how will I implement this. I'开始于Tarik's implementation,但是我阻止了如何将子模态组件传递给服务,因此它将是dialogRef使用的组件 .

回答(1)

2 years ago

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

这是我的模态服务:

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