angular - Angular2 中的更改不会更新 View

Question

我已经开始探索 Angular2(我使用的是 Angular1 和一些 React 背景)，但我遇到了一个问题。

我想将某些击键绑定(bind)到组件中的操作，因此我决定使用 Angular2 生命周期来绑定(bind)/取消绑定(bind)操作。

但是，如果我在 Mousetrap 回调中执行某些操作，它会起作用，但它不会呈现，并且在运行摘要循环之前更改是不可见的。

我是否需要显式运行一些东西来更新 View

有人可以帮我弄清楚发生了什么事吗？任何帮助将不胜感激。

---

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 的回答绝对正确，但我想提出一个不同的解决方案。

Mousetrap 的问题库是它在 Angular zone 之外创建实例 (参见 here)。但是要在每个异步事件之后触发变化检测，实例应该在 Angular zone 内实例化。 。您有两种选择来实现这一目标:

1. 使用依赖注入(inject):

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

// ...

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

1. 只需创建 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()在每个bind打电话。在依赖注入(inject)的情况下，你也可以使用这个 mousetrap应用程序的任何组件/服务中的实例(不仅在 App 组件中)。

参见 this plunk .我在那里使用依赖注入(inject)。