Question

我正在使用组件作为模板打开一个模态，一切正常，模态打开，我订阅onHide事件，订阅工作也。

但我在这里面临挑战，我想发送一个具体的原因，例如：'消息添加成功'作为原因。我怎样才能做到这一点？如何发送特定字符串作为原因？

目前，我正在尝试在MessageAddComponent组件中设置一个值，并使用bsModalRef.Content在父组件中访问它，但这不是一个好主意。

newMessage() {
    this.bsModalRef = this.modalService.show(MessageAddComponent, {
        class: 'modal-lg'
    });
    this.subscriptions.push(this.modalService.onHide.subscribe((reason: string) => {
        // i dont like this approach
        if (this.bsModalRef.content.anySuccessfulAction) {
            console.log('foo and bar')
        }
        this.unsubscribe();
    }));
}

Answer 1

终于找到了解决方案：

在用作模态的组件中注入BsModalService，然后将dismiss reason设置为以下

this.modalService.setDismissReason(theReason);

Answer 2

为简化订阅，您可以通过 .take（）运算符创建“一次性”订阅：

this.modalService.onHide
    .pipe(take(1))
    .subscribe(() => {
        console.log(this.bsModalRef.content)
    });

Answer 3

当我们调用modalRef.show（component）时，它会转到该组件，但不会在屏幕上显示任何内容。
如果您使用调试器进行观察，则在执行了几行之后，它将显示弹出窗口。
假设我有

ngOnInit(){
    method1();
    method2();
}
method1(){
    modalRef.show(component);
    modalRef.hide();
}
method2(){
    modalRef.show(component);
    modalRef.hide();
}

当我这样做时，modal2将首先弹出并关闭。弹出了modal1，但它不会隐藏，因为hide的执行已经结束，并且不会在方法1中再次出现。

Answer 4

好的解决方案：

this.modalService.onHide.pipe(take(1), filter(reason => reason === 'yourReason')).subscribe(() => {
    // Do anything here, this will get called only once
});

然后在您的模式中，然后隐藏您的模式：

this.modalService.setDismissReason('yourReason');

将参数发送到ngx-bootstrap模式中的onHide事件

4 个答案: