首页 文章

使用共享服务和组件之间的Observable发送数据

提问于
浏览
0

假设我有一个我在模态和组件之间共享的服务 . 我想做类似以下的事情:

  • 单击按钮

  • 打开模态

  • 填写输入字段

  • 点击模态上的继续按钮确认并关闭模态

  • 使用上述输入字段值创建网络请求

在继续发出请求之前,我如何在组件中等待用户单击模式中的“继续”按钮?

我想从共享服务创建一个Observable,一旦我点击继续按钮就可以发出数据 . 然后我的组件将订阅此Observable,并在成功时继续处理网络请求 .

这是一些代码:

this.modalService.open('custom-modal');

// The following should only happen after entering values in the appropriate input fields and clicking on the continue button

this.sharedService.getFormFields.subscribe(values => {
    this.httpService.post(values[0], values[1]);
});

这是正确的方式吗?有什么想法吗?

1 回答

  • 1

    我认为这是一种错误的接近方式,至少听起来有点过于复杂 .

    我的建议是,你在组件的标记中有一个模态 . 当用户在弹出窗口中单击“确定”按钮时,我会创建一个输出事件,然后,我将发出一个我将在组件中捕获的事件 . 当我捕获这个时,我将使用正常服务调用我的请求,接收通过相同输出事件填充的值 .

    样品:

    模态A:

    @Output() clickEvt = new EventEmitter<MyModel>();
    
    okButtonClicked(model: MyModel) {
       this.clickEvt.emit(model);
    }
    
    // This would be triggered once the click button has been pressed.
    

    组件A :(标记)

    <my-modal-component (clickEvt)="doRequest($event)"></...>
    

    ComponentB:(ts)

    doRequest(model: MyModel) {
       this.myNormalService.doRequest(model).subscriber()...
    }
    

相关问题