Question

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

点击按钮
打开模态
填写输入字段
点击模态上的继续按钮确认并关闭模态
使用上述输入字段值创建网络请求

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

我正在考虑从共享服务创建一个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]);
});

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

Answer 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()...
}

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

1 个答案: