某些事件未触发更改检测
Change detection not triggered on some event
我有一个 subscribes
从 service
到 Observable
的组件。当 observable
发出其 next
值时,我的组件发生了一些变化。奇怪的是,组件是否会更新视图取决于 next
值的生成方式。如果我理解正确的话,一些事件已经被 angular 2 猴子修补以触发变化检测,而有些则没有。 MIDI 事件是其中之一(这有点意义)。
如果服务查找点击事件以触发下一个值,则更改会反映在视图中。因此发生变化检测。
如果服务查找键盘事件相同的事件,则会发生更改检测。
但是,当服务使用 MIDI 事件时,不会发生变化检测。
这里是一些代码:
export class App {
arr = [
{id: 1, status: false},
{id: 2, status: false},
{id: 3, status: false}
];
thing = new Subject<boolean>();
constructor(private renderer: Renderer,
private ser:Ser,
private midi: MidiService) {}
ngOnInit(){
// listening to click events, will trigger change detection
this.renderer.listenGlobal('document', 'click', (event) => {
console.log("Left click", event);
this.thing.next(1);
});
this.thing.subscribe( v => this.toggle(v));
// my midi service events will call the toggle method however the
// changes won't be displayed in the view
this.midi.notesPayed$.subscribe(v => this.toggle(v));
}
这是一个 plnkr :
https://plnkr.co/edit/SS6jwgQg4TVdOCC05cNV?p=preview
我不确定这是 angular 2 底层工作的错误还是功能。无论如何我想知道 为什么 这个发生。具体问题很容易通过自己调用变化检测来解决,所以我不需要解决方案。
这是已知行为。 zone.js 未涵盖 MIDI API,因此 Angulare 不会收到 运行 更改检测的通知。
要么注入zone:NgZone
,要么用this.zone.run(() => {...})
包裹改变模型的代码
或通过调用 this.cdRef.detectChanges()
注入 cdRef:ChangeDetectorRef
并在更改后调用更改检测
我有一个 subscribes
从 service
到 Observable
的组件。当 observable
发出其 next
值时,我的组件发生了一些变化。奇怪的是,组件是否会更新视图取决于 next
值的生成方式。如果我理解正确的话,一些事件已经被 angular 2 猴子修补以触发变化检测,而有些则没有。 MIDI 事件是其中之一(这有点意义)。
如果服务查找点击事件以触发下一个值,则更改会反映在视图中。因此发生变化检测。
如果服务查找键盘事件相同的事件,则会发生更改检测。
但是,当服务使用 MIDI 事件时,不会发生变化检测。
这里是一些代码:
export class App {
arr = [
{id: 1, status: false},
{id: 2, status: false},
{id: 3, status: false}
];
thing = new Subject<boolean>();
constructor(private renderer: Renderer,
private ser:Ser,
private midi: MidiService) {}
ngOnInit(){
// listening to click events, will trigger change detection
this.renderer.listenGlobal('document', 'click', (event) => {
console.log("Left click", event);
this.thing.next(1);
});
this.thing.subscribe( v => this.toggle(v));
// my midi service events will call the toggle method however the
// changes won't be displayed in the view
this.midi.notesPayed$.subscribe(v => this.toggle(v));
}
这是一个 plnkr :
https://plnkr.co/edit/SS6jwgQg4TVdOCC05cNV?p=preview
我不确定这是 angular 2 底层工作的错误还是功能。无论如何我想知道 为什么 这个发生。具体问题很容易通过自己调用变化检测来解决,所以我不需要解决方案。
这是已知行为。 zone.js 未涵盖 MIDI API,因此 Angulare 不会收到 运行 更改检测的通知。
要么注入zone:NgZone
,要么用this.zone.run(() => {...})
或通过调用 this.cdRef.detectChanges()
cdRef:ChangeDetectorRef
并在更改后调用更改检测