全局事件（window.onresize）未更改局部变量的值

Question

全局事件（window.onresize）未更改局部变量的值。

export class TestComponent implements OnInit {
    a: number = 0;
    b: number = 0;
    ngOnInit() {
        window.onresize = () => {
            this.a = 10;
            this.b = 10;
        };
    }
}

Answer 1

使用主机绑定绑定到全局事件（这在API文档中提到，deep inside the DirectiveMetadata page）：

@Component({
  selector: 'my-app',
  template: `<p>Resize window and look at console log.
    <p>{{a}} {{b}}`
})
export class AppComponent {
  @HostListener('window:resize') onResize() {
    this.a++;
    this.b++;
    console.log(this.a, this.b, event)
  }
}

plunker

您的原始代码不起作用，因为您将onresize处理程序（Angular最初进行了猴子修补）修改为您自己的函数。因此，Angular在事件处理程序完成后不再有办法运行更改检测。使用主机绑定可以保留Angular monkey-patch，因此它不会禁用更改检测，因此在调整resize事件后，您的视图将会更新。

Answer 2

  

没有更改本地变量的值

从屏幕截图中我可以看到this.b = 10，因此确实更改了变量值。

在图片中，您还会看到a: number = 0。这只是自上一个断点以来a的值。您可以看到this.a也是10

Answer 3

我刚刚通过强制更新代码在Angular Zone中运行来解决类似的问题。我所遵循的文件是https://angular.io/docs/js/latest/api/core/index/DirectiveMetadata-class.html（截至今天10/8/16的当前版本）。

这样的事情应该有效：

import {Component, OnInit, NgZone} from '@angular/core';

constructor(private _ngZone: NgZone) {
}

ngOnInit() {
    window.onresize = () => {
        this._ngZone.run(() => {
            this.a = 10;
            this.b = 10;
        }
    };
}

这比Mark Rajcok's在这个问题中的答案更简单，但是NG2仍然是一个移动的目标，所以毫无疑问我所写的是已经做出的改进之一（例如，指向元数据的链接不再存在） ）。