«асинхронной» труба не оказывающего обновления потока

Question

Попытка вынести размер окна на окно изменения размера через поток в угловом 2 компонента с использованием в async трубы:

<h2>Size: {{size$ | async | json}}</h2>

const windowSize$ = new BehaviorSubject(getWindowSize()); 
Observable.fromEvent(window, 'resize') 
    .map(getWindowSize) 
    .subscribe(windowSize$); 

function getWindowSize() { 
    return { 
    height: window.innerHeight, 
    width: window.innerWidth 
    }; 
} 

@Component({ 
    selector: 'my-app', 
    providers: [], 
    template: ` 
    <div> 
     <h2>Size: {{size$ | async | json}}</h2> 
    </div> 
    `, 
    directives: [] 
}) 
export class App { 
    size$ = windowSize$.do(o => console.log('size:', o)); 
    constructor() { } 
} 

Но только компонент отображает исходное состояние и игнорирует обновления потока. Если вы откроете консоль, при изменении размера окна вы увидите обновления из того же потока.

Не могу понять, что мне не хватает здесь.

Вот plunker

Answer 1

Обработчик событий работает вне зоны угловой, так обнаружение Углового изменения не запускается, когда срабатывает событие. Поместите обработчик событий внутри вашего компонента, а затем он получит обезьянью заплату вместе со всеми другими асинхронными событиями, следовательно, Угловое обнаружение изменения будет выполняться после каждого события (и обновить вид):

ngOnInit() { 
    Observable.fromEvent(window, 'resize') 
    .map(getWindowSize) 
    .subscribe(windowSize$); 
} 

Plunker

---

Другой вариант, обсуждается в комментариях, является manually run change detection, когда вид модели обновляется:

import {Component, ChangeDetectorRef} from 'angular2/core' 
... 
export class App { 
    size$ = windowSize$.do(o => { 
    console.log('size:', o); 
    // since the resize event was not registered while inside the Angular zone, 
    // we need to manually run change detection so that the view will update 
    this._cdr.detectChanges(); 
    }); 

    constructor(private _cdr: ChangeDetectorRef) {} 
} 

Plunker

Обратите внимание, что вы можете вместо этого хотите попробовать запустить ApplicationRef.tick() один раз, скажем, в корневой компонент, который будет выполняться обнаружение изменений на все компоненты – а не работает ChangeDetectorRef.detectChanges() в каждом компоненте. (И вам, возможно, понадобится обернуть tick() внутри метода setTimeout(), чтобы убедиться, что все модели представления компонентов были обновлены ... Я не уверен, что все методы обратного вызова do() будут выполнены, то есть, если все они будут выполняться за один оборот JavaScript VM, или если задействовано несколько витков.)

Answer 2

Поскольку моя цель состояла в том, чтобы иметь возможность абстрагировать потоки размера окна в другом модуле, по-видимому, просто обертывая потоки в классе, запечатавшем сделку:

"Это будущее" версия:

"Бабуля" ве rsion:

import {Observable, BehaviorSubject} from 'rxjs'; 

export class WindowSize { 
    width$: Observable<number>; 
    height$: Observable<number>; 

    constructor() { 
     let windowSize$ = new BehaviorSubject(getWindowSize()); 
     this.width$ = (windowSize$.pluck('width') as Observable<number>).distinctUntilChanged(); 
     this.height$ = (windowSize$.pluck('height') as Observable<number>).distinctUntilChanged(); 

     Observable.fromEvent(window, 'resize') 
      .map(getWindowSize) 
      .subscribe(windowSize$); 
    } 
} 

function getWindowSize() { 
    return { 
     height: window.innerHeight, 
     width: window.innerWidth 
    }; 
} 

Хотя я не хотел класса/услуги в этом модуле, просто очистить/независимую от платформы конструкции, это была единственным чистый способ, который работал на угловой без необходимости заботиться о запуске обновления зоны.