Глобальные события (window.onresize) не изменили значение локальной переменной

Глобальные события (window.onresize) не изменили значение локальной переменной.

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

Ответ 1

Привязать к глобальным событиям, используя привязку хоста (это упоминается в документах API, глубоко внутри страницы DirectiveMetadata):

@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, поэтому он не отключает обнаружение изменений, поэтому ваше представление будет обновляться после возникновения события изменения размера.

Ответ 2

не изменило значение локальной переменной

С вашего скриншота я вижу, что this.b = 10, поэтому он изменил значение переменной.

На рисунке вы также видите a: number = 0. Это только значение a с момента последней точки останова. Вы можете видеть, что this.a также 10

Ответ 3

Я просто решил аналогичную проблему, заставив код обновления работать в зоне Angular. Документация, которую я выполнил, находится в 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 в этом вопросе, однако NG2 по-прежнему является движущей целью, поэтому, без сомнения, то, что я написал, является одним из улучшений, которые были (например, ссылка на DirectiveMetadata больше не существует).