Я начал изучать 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']);
}
}