如何使用EventManager以angular角度收听window.resize事件?

时间:2017-09-25 04:14:17

标签: javascript angular rxjs observable dom-events

我从这个stackoverflow中借用了一些代码:Angular window resize event 答案的作者说我应该使用EventManager如果我想从服务中侦听窗口事件而不是破坏Angular Universal。话虽如此,这个答案仍然是真的吗?如果是这样,有人可以告诉我为什么当我调整窗口大小时我订阅onResize$ Observable时什么都不记录?

import { EventManager } from '@angular/platform-browser';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { Injectable } from '@angular/core';

@Injectable()
export class ResizeService {

  get onResize$(): Observable<Window> {
    return this.resizeSubject.asObservable().filter(_ => !_);
  }

  private resizeSubject: Subject<Window>;

  constructor(private eventManager: EventManager) {
    this.resizeSubject = new Subject();
    this.eventManager.addGlobalEventListener('window', 'resize', this.onResize.bind(this));
  }

  private onResize(event: UIEvent) {
    this.resizeSubject.next(<Window>event.target);
  }
}

MY-component.ts

export class MenuContainer implements OnInit {

  constructor(private resizeService : ResizeService ) {
  }

  public ngOnInit() {
    this.resizeService.onResize$.subscribe(console.log); // never logs when I resize
  }
}

0 个答案:

没有答案