Angular2中的更改未更新视图

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

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

但是,如果我在Mousetrap回调中执行某些操作,它会起作用,但它不会呈现,并且在运行摘要周期之前不会显示更改.

我是否需要显式运行某些内容来更新视图

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

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

@Component({
  template: `

    Video template: Mode {{ mode }}
    
  
`
})
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']);
  }

}

alexpods.. 20

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

Mousetrap库的问题是它在角度区域之外创建它的实例(见这里).但是要在每个异步事件之后触发更改检测,实例应该在角度区域内实例化.您有两种方法可以实现此目的:

使用依赖注入:

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

// ...

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

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

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

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

// ...

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

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

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

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