当其他组件导致其数据更新并接下来调用时,Rx Observable不会更新

Question

在我的Angular2应用程序中,我有一个暴露在视图中的rx Observable.此observable在商店中创建,并通过subject.asObservable传递给组件

如果子页面上的操作启动该操作,我在访问主题时调用next()的页面引用时遇到问题,但如果它调用商店的页面相同,则它可以正常工作.

下面显示了这个项目的布局和流程,下面我将说明它在什么情况下失败.

base.store,包含主题next()调用

  options: { collection: string };
  _subject$: Subject<Array<any>>;
  protected dataStore: {};

  constructor(protected http: Http) { }
  init(options) {
    this.options = options;
    this.dataStore = {};
    this.dataStore[options.collection] = [];
    this._subject$ = <Subject<Array<any>>>new Subject();
    this.load();
  }

  load() {
    this.http.get(endpointurl).map(response => response.json()).subscribe(
      data => {
        this.dataStore[this.options.collection] = data;
        this._subject$.next(this.dataStore[this.options.collection]);
      }),
      err => console.log("Error load", err));
  }

  addEntity(entity: any) {
    this.http.post(endpointurl, entity).subscribe(
      data => this.load(),
      err => console.log("Error addEntity", err));
  }

contacts.store,它将主题公开为可观察的

export class ContactStore extends BaseStore {

  protected _subject$: Subject<Array<Contact>>;
  options;

  constructor(protected http: Http) {
    super(http);

    this.options = { collection: "contacts" };
    this.init(this.options);
  }

  get contacts$() {
    return this._subject$.asObservable();
  }

  addOrUpdateContact(contact: Contact) {
    if(contact._id) this.updateEntity(contact);
    else this.addEntity(contact);
  }

contacts.component,它使用observable并显示列表

  public contacts$: Observable<Array<Contact>>;

  constructor(private contactsStore: ContactStore) {
    this.contacts$ = this.contactsStore.contacts$;
  }    

contacts.view,显示联系人

<ion-item *ngFor="let contact of contacts$ | async">{{contact.name}}</ion-item>

现在来说明问题,我使用以下代码行添加一个新的联系人; this.contactsStore.addOrUpdateContact(contact);

• 如果我在contact.view处于活动状态时添加联系人,则视图会立即更新,并且一切正常
• 如果我在子页面上添加联系人(例如,contact.detail),当我返回父视图时,联系页面不会反映新添加的联系人
• 如果我回来了,那么我会从该父页面添加另一个联系人,该视图会更新并显示新的联系人!
• 如果我离开并返回联系人视图,它也会显示新联系人

为了调试,我在任何地方附加了一个订阅事件到这个项目.我的发现似乎突出了这个问题.

来自contact.store内的订阅始终捕获添加并发出和更新.如果是活动页面,则来自contact.component内的订阅会执行此操作,但如果在我位于其他组件中时发生添加操作则不会执行此操作.

我如何确保它确实存在,或者一旦我返回页面就会自我刷新？

由于看起来问题是由于contacts.component中没有发生订阅事件引起的,我尝试使用ngZone和applicationRef.tick手动触发更新,但都没有解决问题.

为了帮助调试,我还在subject.next()之后立即发出事件"contacts.loaded".我在contacts.component上订阅了该事件.即使在视图未更新的情况下,它也会始终触发.我试过放入ChangeDetectorRef.detectChanges()无济于事.

Answer 1

我假设您不止一次提供服务.不要添加它providers: [],@Component()但不是@NgModule()那时你只获得整个应用程序的单个服务实例,否则你得到每个组件实例的服务实例.