首页 文章

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

提问于
浏览
2

使用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,新/编辑组件按预期工作 .

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

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

单击处理程序工作,但插入集合和返回的延迟似乎使另一个方案无法更新 . 如果我选中或单击输入组件更新 . Console.log调用显示正在传递和设置的id .

有什么建议?

编辑:我只使用相关组件构建了应用程序的框架 . 奇怪的是它工作的第一对记录然后在插入文档后没有更新,在回调中获取id然后订阅功能在组件中分配contactid .

另一个编辑:在打了一下之后,我想我找出问题所在,但不是解决方案 .

该服务是MeteorComponent,Injectable() . 该组件附带Angular2-meteor,它包含订阅和调用流星方法 . 具体来说,调用函数似乎返回一个promise,然后在函数执行后更新值并在服务器上返回一个值 .

如果从单击处理程序调用SetContactId,则更新有效,但如果MeteorComponent中的Meteor方法“调用”回调函数调用它,则无法进行更新 .

现在找到一个解决方案 .

1 回答

  • 3

    感谢Hongbo_Miao,我找到了答案 . 有必要在NgZone中的Meteor.call回调中包装SetContactId调用以使其更新 . 它按预期工作 .

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

相关问题