如何传递和接收数据 to/from 一个 ngx-bootstrap 模态？

Question

可以使用 initialState 将数据传递到模式，但我如何才能接收回数据？例如，如果我想创建一个确认对话框？

Answer 1

尽管目前没有内置方法可以做到这一点，但可以通过绑定到 onHide/onHidden 事件来完成。

我们的想法是创建一个 Observer，它将订阅 onHidden 事件并在接收到数据时触发 next()。

我使用的是 onHidden 而不是 onHide，因此所有 CSS 动画都在返回结果之前完成。

我还在 MessageService 中实现了它以更好地分离代码。

@Injectable()
export class MessageService {
    bsModalRef: BsModalRef;

    constructor(
        private bsModalService: BsModalService,
    ) { }

    confirm(title: string, message: string, options: string[]): Observable<string> {
        const initialState = {
            title: title,
            message: message,
            options: options,
        };
        this.bsModalRef = this.bsModalService.show(ConfirmDialogComponent, { initialState });

        return new Observable<string>(this.getConfirmSubscriber());
    }

    private getConfirmSubscriber() {
        return (observer) => {
            const subscription = this.bsModalService.onHidden.subscribe((reason: string) => {
                observer.next(this.bsModalRef.content.answer);
                observer.complete();
            });

            return {
                unsubscribe() {
                    subscription.unsubscribe();
                }
            };
        }
    }
}

ConfirmDialogComponent 如下所示：

export class ConfirmDialogComponent {
    title: string;
    message: string;
    options: string[];
    answer: string = "";

    constructor(
        public bsModalRef: BsModalRef,
    ) { }

    respond(answer: string) {
        this.answer = answer;

        this.bsModalRef.hide();
    }

}

实现后，使用非常简单：

confirm() {
    this.messageService
        .confirm(
            "Confirmation dialog box",
            "Are you sure you want to proceed?",
            ["Yes", "No"])
        .subscribe((answer) => {
            this.answers.push(answer);
        });
}

您可以在 demo.

中获取完整代码并查看运行

如何传递和接收数据 to/from 一个 ngx-bootstrap 模态？

How can I pass and receive data to/from an ngx-bootstrap modal?

ngx-bootstrap

angular

ngx-bootstrap-modal