Question

在Angular中我在组件内使用模态指令，当模态关闭时，它会发出onHide事件（EventEmitter）。

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

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

当Modal Directive发出close事件时，我需要从组件输出onHide事件。

以下是我的表现：

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

有些东西告诉我，有更好的方法来实现这一目标，我可以根据指令close可观察的方式定义组件的onHide事件。救我免于订阅指令onHide。

那是更好的方法？

Answer 1

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

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

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

另一件需要注意的事情是，您需要在组件被销毁时取消订阅。

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

类似的问题：Pipe RxJS observable to existing subject

从Observable可观察到

1 个答案: