angular - 某些事件未触发更改检测

标签 angular angular2-changedetection

我有一个组件订阅来自服务Observable。当 observable 发出其 next 值时,我的组件中发生了一些变化。奇怪的是,组件是否会更新 View 取决于 next 值的生成方式。如果我理解正确的话,一些事件已经被 angular 2 猴子修补以触发变化检测,而有些则没有。 MIDI 事件是其中之一(这有点道理)。

如果服务查找点击事件以触发下一个值,则更改会反射(reflect)在 View 中。因此发生变化检测。

如果服务查找键盘事件,则发生变化检测。

但是,当服务使用 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 底层工作原理的错误还是功能。无论如何,我想知道为什么会发生这种情况。具体问题很容易通过自己调用更改检测来解决,因此我不需要解决方案。

最佳答案

这是已知行为。 MIDI API 未包含在 zone.js 中,因此 Angulare 不会收到运行变化检测的通知。

注入(inject) zone:NgZone 并用 this.zone.run(() => {...}) 包装更改模型的代码

或注入(inject) cdRef:ChangeDetectorRef 并在更改后通过调用 this.cdRef.detectChanges() 调用更改检测

关于angular - 某些事件未触发更改检测,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41228368/

相关文章:

Angular 火 : limit queries to users that has a specific value

angular - 您如何编写用于 NodeJS 和 AWS CodeBuild 的 buildspec.yml?

javascript - 在 onInit 生命周期钩子(Hook)上调用时,异步函数无法按预期工作

angular - 使用 Reactive Forms 和 ChangeDetectionStrategy.OnPush 显示验证消息

angular - 如何检测从一个组件到另一个组件的变化

angular - Docker 或适用于 AWS 的 Docker 以及在 AWS EC2 上的部署

Angular 使用 Apollo : Unit testing: Error: Client has not been defined yet

javascript - 检测 Angular 4 中组件的变化

Angular 变化检测: how to refresh only certain items?

Angular 加载微调器错误 :ExpressionChangedAfterItHasBeenCheckedError