UI 不更新（必须点击某处）& 路由器在 Angular2-Meteor 中不工作

Question

我无法在从数据库订阅数据后立即更新 UI，我必须点击某个地方

另外，如果我使用路由器转到另一个页面，它也不起作用

@Component({
  selector: 'foo-component',
  template: `
    {{foo}}
  `
})
export class FooComponent extends MeteorComponent {
  foo: string ;

  constructor() {
    super();

    this.subscribe('messages', () => {
      // I cannot change foo value immediately, I have to click somewhere
      this.foo = 'foo';

      // Also if I use the router to go to another page, it does not work
      // this.router.navigate(['Home']);
    });
  }
}

如何解决？

Answer 1

Note the new angular2-meteor version autoBind is set to true by default. So you probably won't meet this issue again.

But you still need use NgZone in Accounts.changePassword or other similar Accounts.foo() functions.

这个问题是因为那部分代码运行在 Angular 2 区之外，你需要运行它在区内立即更新 UI 或使用路由器转到另一页。

这些问题通常发生在什么地方？

大多数时候你不会这样做。那么你什么时候需要这个？通常在 Meteor 函数的回调中：

   this.autorun(() => {
     // here you need
   });

   this.subscribe('messages', () => {
     // here you need
   });

   this.call('newMessage', (error, result) => {
     // here you need
   });

   Accounts.changePassword(currentPassword, newPassword, error => {
     // here you need
   });

如何解决？

拿

 this.call('newMessage', (error, result) => {
   this.router.navigate(['Home']);
 });

例如，您需要更改为：

import { NgZone } from '@angular/core';

constructor(private zone: NgZone) {}

this.call('newMessage', (error, result) => {
  this.zone.run(() => {
    this.router.navigate(['Home']);
  });
});

有干净的方法吗？

幸运的是，Angular2-Meteor 可以帮助您完成这项肮脏的工作。

检查Angular2-Meteor API document，this.subscribe和this.autorun有一个autoBind参数。

所以现在您不需要使用 this.zone.run，而是只需添加一个 true:

   this.autorun(() => {
     // your code
   }, true);

   this.subscribe('messages', () => {
     // your code
   }, true);

UI 不更新（必须点击某处）& 路由器在 Angular2-Meteor 中不工作

UI not update (have to click somewhere) & router not work in Angular2-Meteor

meteor

typescript

angular2-meteor

angular

这些问题通常发生在什么地方？

如何解决？

有干净的方法吗？