Question

我正在尝试编写一个自定义组件，它可以绑定到通过输入传入的observable，并根据observable的状态显示/隐藏元素。我希望能够做的是：

@Input() observable: Observable<any>;
ngOnInit() {
    this.observable.onSubscribe(() => {
        // show element, run logic on start;
    });
    this.observable.onCompleteOrNext(() => {
        // hide element, run logic on end;
    });
}

在倾注了rxjs文档之后，我发现使用let我可以做类似的事情：

this.observable.let((o: Observable) => {
    // run logic.
    return o;
});

但这看起来有点像黑客，而且我也无法弄清楚当observable完成时如何运行。我希望observable是异步的，比如HTTP请求，但是这个组件需要处理它。

对于可观察的完成，我假设我可以使用do函数执行以下操作：

this.observable.do(() => {
    // run logic when observable completes.
    // not getting called.
});

但是，除非在可观察创建上定义了do函数，否则不会调用它。

我知道Angular2允许将视图直接绑定到observables，但我还需要能够基于observable运行逻辑，而不仅仅是show / hide视图元素。

我的googlefoo让我失望并且rxjs文档不是很有启发性，但我觉得这应该是一件相当容易的事情。也许我接近错了。

Answer 1

您可以在子组件中提供钩子方法：

export class ChildComponent {
    onSubscribe(){}
    onNext(){}
    onComplete(){}
}

在父组件中，您可以使用ViewChild来获取对ChildComponent的引用，然后订阅observable并在关键点调用钩子方法：

一旦您订阅了
当observable发出
当观察完成时

export class ParentComponent {
    @ViewChild('child') child:ChildComponent;
    ...
    this.observable.subscribe(
        next => this.child.onNext(),
        err => {},
        () => this.child.onComplete()
    );
    this.child.onSubscribe()
}

Live demo

在observable subscribe上运行函数

1 个答案: