首页 文章

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

提问于
浏览
1

我在显示模态时使用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

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

    这是我的模态服务:

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

相关问题