来自 Observable 的 Observable答案

【问题标题】：Observable from Observable来自 Observable 的 Observable
【发布时间】：2018-08-22 17:23:05
【问题描述】：

在 Angular 中，我在组件内使用模态指令，该指令在模态关闭时发出 onHide 事件 (EventEmitter)。

这个组件是一个对话框组件，它的模板定义了一个对话框，Modal Directive（bsModal下面）使它成为模态的。

<div bsModal #modal="bs-modal" class="modal fade" role="dialog" tabindex="-1" [config]="{backdrop: 'static',keyboard:'false'}">
...
</div>

当模态指令发出 onHide 事件时，我需要从组件中输出 close 事件。

这是我的做法：

export class DialogComponent implements OnInit {
    @ViewChild('modal') modal: ModalDirective;
    @Output() close = new EventEmitter<any>(); // Component's close event emitter
    ...
    ngAfterViewInit() {
        this.modal.onHide.subscribe(() => {
            this.close.emit();
        });
    }
    ...
}

有些事情告诉我有更好的方法来实现这一点，即我可以根据指令的 onHide observable 以某种方式定义组件的 close 事件，这将使我免于订阅指令的 onHide。

有什么更好的方法？

【问题讨论】：

没有得到太多，但 EventEmitter 比 observable 更好，因为如果你使用 observable ，你也需要在 ngDestroy 事件中销毁/取消订阅它
那么，如何将 EventEmitter 从组件的模板内传递到外部？

标签： angular rxjs

【解决方案1】：

嗯，我认为没有比你现在更好的方法了。但是，您可以将其缩短一点。

ngAfterViewInit() {
  this.subscription = this.modal.onHide.subscribe(this.close);
}

请注意，我假设 onHide 永远不会完成也不会出错。

另外需要注意的是，当组件被销毁时，你需要取消订阅。

onDestroy(): void {
  this.subscription.unsubscribe();
}

类似问题：Pipe RxJS observable to existing subject

【讨论】：