javascript - 使用 Observables 传播值变化

Question

我使用 Observables 将值从父组件传递到子组件。

这是我的顶级应用程序组件:

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Observer } from 'rxjs/Observer';
import { ViewModel } from './ViewModel.data';
import { ViewComponent } from './ViewComponent.component';

@Component({
    selector: ...,
    directives: [
        ROUTER_DIRECTIVES,
        ViewComponent
    ],
    precompile: [],
    styles: [],
    template: `
            <div>
            <ul class="nav nav-tabs">
              <li *ngFor="let v of views"><a (click)="setView(v)">{{ v.name }}</a></li>
            </ul>
              <viewcomponent
                *ngFor="let v of views"
                [viewName]="v.name"
                [activeViewObservable]="activeViewObservable"></viewcomponent>
            </div>
    `
})
export class AppComponent{
    views:ViewModel[];
    activeViewObservable:Observable<ViewModel>;
    viewObserver:Observer<ViewModel>;
    activeView:ViewModel;

    constructor() {
        this.views = [{name: 'one'}, {name: 'two'}, {name: 'three'}, {name: 'four'}];
        this.activeViewObservable = new Observable<ViewModel>(observer => this.viewObserver = observer);
    }

    public setView(view:ViewModel):void {
        this.viewObserver.next(view); // load values here
      }
}

我在这里使用一个名为 viewcomponent 的组件:

@Component({
    selector: 'viewcomponent',
    directives: [
        ROUTER_DIRECTIVES
    ],
    template: `
        <div class="tab-pane" [ngClass]="{ 'active': isActive() }">
            ...
        </div>
      `
})
export class ViewComponent {
    // these values are always the last view. why???
    @Input() viewName:string;
    @Input() activeViewObservable:Observable<TabViewModel>;

    private activeView:ViewModel;

    constructor() {}

    ngOnInit() {
        this.activeViewObservable.subscribe( //listen to values loaded with the viewObserver
            activeView => {this.activeView = activeView;},
            error => console.error(error));
    }

    public isActive():boolean {
        let bool:boolean = false;
        if (this.activeView) {
            console.log(this.viewName); // <---- this value is always the last view, 'four'
            bool = this.activeView.name == this.viewName;
        }
        console.log(bool);
        return bool;
    }
}

我使用的数据模型在这里:

export interface ViewModel {
    name: string;
}

我正在尝试使用 AppComponent 中的值加载观察者，然后在子组件中订阅它们。但是，可观察对象发出的值始终是最后一个元素。

我想在父 View 中调用 setView 方法，然后将一个类应用于该特定 subview 。

Answer 1

可能的解决方案:如果您想在外部的 Observer 上调用 .next()，请使用 Subject Observable 的实例化。 Subject 的行为与两者相同。您可以从向其传递事件的位置单独订阅它们。 <强> Plunker Example

为什么你的代码不起作用？

使用 rxjs 的代码可以这样写:

let viewObserver;
const myObservable = new Observable(observer => {
  viewObserver = observer;
});

myObservable.subscribe(
  activeView => {
    console.log(1, activeView);
  },
  error => console.error(error));

myObservable.subscribe(
  activeView => {
    console.log(2, activeView);
  },
  error => console.error(error));

viewObserver.next({ name: 'one' });

https://jsfiddle.net/t5z9jyf0/

预期输出是什么？

2, { name: 'one' }

为什么？

让我们打开rxjs文档

• http://reactivex.io/rxjs/manual/overview.html#subscribing-to-observables

关键点是:

When calling observable.subscribe with an Observer, the function subscribe in Observable.create(function subscribe(observer) {...}) is run for that given Observer. Each call to observable.subscribe triggers its own independent setup for that given Observer.

let viewObserver;
var myObservable = new Observable<ViewModel>(function subscribe(observer) {
  console.log(observer, observer.destination._next);
  viewObserver = observer;
});

myObservable.subscribe( // this triggers subscribe function above
  activeView => {
    console.log(1, activeView);
  },
  error => console.error(error));


myObservable.subscribe( // this also triggers subscribe function above
  activeView => {
    console.log(2, activeView);
  },
  error => console.error(error));


viewObserver.next({ name: 'one' }); // notify subscriptions

https://jsfiddle.net/t5z9jyf0/1/

所以该代码不起作用，因为之后

myObservable.subscribe(
  activeView => {
    console.log(2, activeView);
  },
  error => console.error(error));

方法执行后，viewObserver将被覆盖，并将成为activeView => { console.log(2, activeView); 中的Subscriber对象。 }，所以 viewObserver.next 会给我们

console.log(2, { name: 'one' });

这就是为什么只执行最后一个订阅