Просмотр не обновляется при изменении в Angular2
Я начал изучать Angular2 (я прихожу с Angular1 и немного фона React), и я столкнулся с проблемой.
Я хочу связать определенные нажатия клавиш с действиями в моем компоненте, поэтому я решил использовать жизненный цикл Angular2 для привязки / развязывания действий.
Однако, если я что-то делаю из-за обратного вызова Mousetrap, он работает, но он не отображается, и изменение не отображается до тех пор, пока цикл дайджеста не будет запущен.
- Угловой 2.0 маршрутизатор не работает при перезагрузке браузера
- Как применять фильтры к * ngFor?
- Как получить ссылку на компонент, связанный с ElementRef в Angular 2
- Проблема с обнаружением изменений. Почему это изменяется, когда это одна и та же ссылка на объект с On Push
- Angularjs препятствуют отправке формы при неудачной проверке ввода
Нужно ли мне явно что-то запускать, чтобы обновить представление?
Может ли кто-нибудь помочь мне разобраться, что происходит? Любая помощь будет очень оценена.
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']); } } - Как глобально установить параметр preserveWhitespaces в Angular на false?
- Как вернуться на предыдущую страницу
- Angle $ scope. $ Apply vs $ timeout как безопасный $ apply
- множественная компоновка для разных страниц в угловом 2
- Доступ к firebase.storage () с помощью AngularFire2 (Angular2 rc.5)
- Как использовать * ngIf else в Angular?
- Скрыть / показать отдельные элементы внутри ngFor
- Как я действительно развертываю приложение Angular 2 + Typcript + systemjs?
Хотя ответ @ Günter абсолютно правильный, я хочу предложить другое решение.
Проблема с библиотекой Mousetrap заключается в том, что она создает свой экземпляр вне угловой зоны (см. Здесь ). Но для того, чтобы скрыть обнаружение изменений после каждого асинхронного события, экземпляр должен быть создан внутри угловой зоны . У вас есть два варианта:
- Используйте инъекцию зависимостей:
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() в каждом вызове bind . В случае инъекции зависимостей вы также можете использовать этот экземпляр mousetrap в любом компоненте / службе вашего приложения (не только в компоненте App ).
См. Этот плунж . Я использую там инъекцию зависимостей.
Если MouseTrap является чем-то вне Углового, вам может потребоваться ввести NgZone и запустить ваш код, как
Mousetrap.bind('i', () => this.ngZone.run(() => this.incrementMode()));