将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,则更新有效,但如果通过Meteor方法调用它,则无法调用&#39; MeteorComponent中的回调函数。
现在找到解决方案。
答案 0 :(得分: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');
}
});
});
}