View没有更新Angular2的变化

我已经开始探索Angular2（我正在和Angular1以及一些React背景一起），而且我遇到了一个问题。

我想将某些击键绑定到组件中的操作，所以我决定使用Angular2生命周期绑定/取消绑定操作。

但是，如果我在Mousetrapcallback中执行某些操作，它将起作用，但是它不会呈现，只有运行摘要循环后才会显示更改。

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

有人能帮我弄清楚是怎么回事吗？ 任何帮助将非常感激。

---

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

Answer 1

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

Mousetrap库的问题在于它在angular度区域之外创build它的实例（请参见这里 ）。 但是为了在每个asynchronous事件之后触发变化检测，实例应该在angular度区域内实例化。 你有两个select来实现这一点：

1. 使用dependency injection：

 bootstrap(App, [provide(Mousetrap, { useFactory: () => new Mousetrap() }) ]); // ... @Component({ selector: 'my-app', // ... }) export class App { constructor(@Inject(Mousetrap) mousetrap) { this.mousetrap = mousetrap; // ... } //... } 

2. 只需在构造函数中创buildMousetrap实例：

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

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

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

现在你不需要在每个bind调用中使用ngZone.run() 。 在dependency injection的情况下，你也可以在你的应用程序的任何组件/服务中使用这个mousetrap实例（不仅在App组件中）。

看到这个plunk 。 那里使用dependency injection。

Answer 2

如果MouseTrap是Angular之外的东西，你可能需要注入NgZone并像你一样运行你的代码

  Mousetrap.bind('i', () => this.ngZone.run(() => this.incrementMode()));