Функция запуска на наблюдаемой подписке

Question

Я пытаюсь написать пользовательский компонент, который может связываться с наблюдаемым, проходящим через элементы ввода и отображения/скрытия, в зависимости от состояния наблюдаемого. То, что я хотел бы быть в состоянии сделать что-то вроде:

@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; 
}); 

Но это кажется немного взломанным, и я также не могу понять, как тогда запустить что-то, когда наблюдаемое завершается. Я ожидаю, что наблюдаемые будут асинхронными, такими как HTTP-запрос, но этот компонент должен обрабатывать его в любом случае.

Для наблюдаемым завершения, я предполагал, что я мог бы сделать что-то вроде ниже с do функции:

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

Но, если функция do не определяется на наблюдаемом создания, это не становится называется.

Я знаю, что Angular2 позволяет привязывать вид непосредственно к наблюдаемым, но мне также нужна возможность запускать логику на основе наблюдаемых, а не только элементов отображения/скрытия.

My googlefoo терпит неудачу, и документация rxjs не очень полезна, но я чувствую, что это должно быть довольно простой задачей. Возможно, я ошибаюсь.

Answer 1

Вы могли бы обеспечить методы крючка внутри детского компонента:

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

В родительском компоненте, вы можете использовать ViewChild, чтобы получить ссылку на ChildComponent, а затем подписаться на наблюдаемый и вызывать методы крючка на ключе Ориентир:

• как только вы подписались
• , когда наблюдаемые излучает
• , когда т он наблюден завершен

.

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

Live demo