Angular2中的更改视图未更新

我已经开始探索Angular2(我正在使用Angular1和一些React背景),我遇到了一个问题.

我想绑定某些按键到我的组件中的操作,所以我决定使用Angular2生命周期来绑定/取消绑定操作.

但是,如果我从一个Mousetrap回调中执行某些操作,它会起作用,但它不会被渲染,并且在一个摘要循环运行之前,更改是不可见的.

我需要明确地运行某些更新视图

有人可以帮我弄清楚发生了什么吗？
任何帮助将非常感激.

import {Component} from 'angular2/core';
const Mousetrap = require('mousetrap');

@Component({
  template: `<div>
    Video template: Mode {{ mode }}
    <input type="number" [(ngModel)]="mode"/>
  </div>`
})
export class Video {

  public mode: number;

  constructor() {
    this.mode = 0;
  }

  ngOnInit() {

    console.log('hello Video component');
    Mousetrap.bind('d',() => console.log('this.mode=',this.mode));
    Mousetrap.bind('i',() => this.incrementMode()); // doesn't work

    this.incrementMode(); // works
    this.incrementMode(); // works
    setTimeout(() => this.incrementMode(),4000); // works

  }

  incrementMode() {
    console.log('incMode',this.mode++);
  };

  ngOnDestroy() {
    console.log('bye bye Video component');
    Mousetrap.unbind(['d','i']);
  }

}

虽然@Günter的答案是绝对正确的,我想提出一个不同的解决方案.

Mousetrap库的问题是它在角zone之外创建了它的实例(参见here).但是要在每个异步事件之后触发更改检测,实例应该在角度为zone的范围内实例化.您有两个选项来实现：

>使用依赖注入：

bootstrap(App,[provide(Mousetrap,{ useFactory: () => new Mousetrap() }) ]);

// ...

@Component({
  selector: 'my-app',// ...
})
export class App {
  constructor(@Inject(Mousetrap) mousetrap) {
    this.mousetrap = mousetrap;
    // ...
  }
  //...
}

>只需在构造函数中创建Mousetrap的实例：

@Component({
  selector: 'my-app',// ...
})
export class App {
  constructor() {
    this.mousetrap = new Mousetrap();
    // ...
  }
  //...
}

在这两种情况下,您都可以使用这样的捕鼠器实例：

ngOnInit() {
  this.mousetrap.bind('i',() => this.incrementMode()); // It works now!!!
  // ...
}

现在您不需要在每次绑定调用中使用ngZone.run().在依赖注入的情况下,您也可以在应用程序的任何组件/服务中使用此捕鼠器实例(不仅在应用程序组件中).

请参阅this plunk.我在那里使用依赖注入.

Angular2中的更改视图未更新

相关文章