Angular2中的更改视图未更新
发布时间:2020-12-17 07:45:31 所属栏目:安全 来源:网络整理
导读:我已经开始探索Angular2(我正在使用Angular1和一些React背景),我遇到了一个问题. 我想绑定某些按键到我的组件中的操作,所以我决定使用Angular2生命周期来绑定/取消绑定操作. 但是,如果我从一个Mousetrap回调中执行某些操作,它会起作用,但它不会被渲染,并且在
我已经开始探索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']); } }
虽然@Günter的答案是绝对正确的,我想提出一个不同的解决方案.
Mousetrap库的问题是它在角zone之外创建了它的实例(参见here).但是要在每个异步事件之后触发更改检测,实例应该在角度为zone的范围内实例化.您有两个选项来实现: >使用依赖注入: 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().在依赖注入的情况下,您也可以在应用程序的任何组件/服务中使用此捕鼠器实例(不仅在应用程序组件中). 请参阅this plunk.我在那里使用依赖注入. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |