meteor - Angular 2 组件未从可观察订阅更新

Question

将 Angular 2 与 Meteor 结合使用，我有一个组件树，它使用服务在组件之间传递数据并执行获取和保存内容。

在服务中，

   constructor() {
    this._contactId = new Subject<string>();
    this.contactid$ = this._contactId.asObservable();

  }
  // Service message commands
  SetContactId(id: string) {
      console.log("SetContactId "+id);
      this._contactId.next(id);
  }

这在组件中用于区分新联系人或编辑现有联系人。

<div style="display:flex">
    Id: {{contactid}}
    <div style="flex:1 order:1" *ngIf="!contactid">
        <contact-new></contact-new>
    </div>
    <div style="flex:1 order:1" *ngIf="contactid">
        <contact-editor ></contact-editor>
    </div>
</div>

这是组件订阅。

private contactid : string;

constructor (private _ContactService:ContactService) {


    ContactService.contactid$.subscribe(
        id => {
            //this.id = id;
            console.log('ContactEdit subscription '+id);
            this.contactid = id;
            this.updateId(id);
        } );
    }

    updateId(id) {
        console.log('updateid '+id)
        console.log(this.contactid);
    }

两种方式设置contactid，结果不一样。

clickItem(contact) {
        console.log('clickItem');
        console.log(contact._id);
        this._contactService.SetContactId(contact._id);
    }

这是来自具有联系人列表和点击处理程序的组件。它在服务中设置 id，并且 new/edit 组件按预期工作。

第二种方式是在新的联系人组件构造函数中，

this.newContactForm.valueChanges
            .debounceTime(1000)
            .subscribe(newValue => this.readySave())

readySave() {
...
this._ContactService.newContact(q,true);
}

newContact 方法如下，调用该方法时组件不会更新 contactid。

newContact(data,setid : boolean) {
    let self = this;
    this.call('contacts.add',data,function (error,id) {
        if (!error) {
            console.log(id);
        if (setid) {
             self.SetContactId(id);
          }
          //self.loadRelations(id);
        }
      });
  }

点击处理程序可以工作，但是插入集合和返回的延迟似乎导致其他场景无法更新。如果我按 Tab 键或单击输入，组件就会更新。 Console.log 调用显示正在传递并正确设置的 ID。

有什么建议吗？

编辑: 我仅使用相关组件构建了应用程序的骨架。奇怪的是，它可以工作前几条记录，然后在插入文档、在回调中获取 id、然后订阅函数在组件中分配 contactid 后不会更新。

另一个编辑:在解决了这个问题之后，我想我找到了问题所在，但没有找到解决方案。

该服务是一个 MeteorComponent，Injectable()。该组件附带 Angular2-meteor，它包装了订阅和调用 Meteor 方法。具体来说，调用函数似乎返回一个 promise ，然后一旦函数执行并在服务器上返回一个值，该 promise 就会更新该值。

如果从点击处理程序调用 SetContactId，则更新有效，但如果由 MeteorComponent 内的 Meteor 方法“call”回调函数调用，则更新无效。

现在寻找解决方案。

Answer 1

感谢 Hongbo_Miao，我找到了答案。需要将 SetContactId 调用包装在 NgZone 中的 Meteor.call 回调中才能更新。它按预期工作。

newContact(data,setid : boolean) {
    this.call('contacts.add',data,
        (error,id) => {
            this._ngZone.run(() => {
                console.log(id);
                if (setid) {
                    this.SetContactId(id);
                    console.log('newContact callback');
                }
            });
        });
    }