Angular host listener의 활용

Host Listener란?

호스트의 이벤트를 감지하는 라이브러리

HostListener Decorator Component 작성

아래와 같이 호스트의 이벤트를 감지한다.
여기서 window는

import { HostListener} from "@angular/core";
import { DOCUMENT } from "@angular/platform-browser";
import { Inject } from "@angular/core";

export class LayoutNavComponent implements OnInit {
  constructor(@Inject(DOCUMENT) private document: Document) { }
}
@HostListener("window:scroll", [])
onWindowScroll() {
 //we'll do some stuff here when the window is scrolled
 let windowScrollPos = this.document.documentElement.scrollTop;
}

observable과 throttle을 활용하여 event 반응하기

throttle time이 200ms인 observable을 생성하고, subject를 통해 새로운 인자값을 전달한다.
생성한 observable을 subscribe 해 주고, subject를 통해 계속해서 새로운 인자값을 전달한다.

import { Subject } from 'rxjs/Subject';
import 'rxjs/add/operator/throttleTime';

export class AppComponent implements OnInit {

  private resizeSubject = new Subject<number>();
  private resizeObservable = this.resizeSubject.asObservable().throttleTime(200);

  @HostListener('window:resize', ['$event.target.innerWidth'])
  onResize(width: number) {
    this.resizeSubject.next(width);
  }

  ngOnInit() {
    this.resizeObservable.subscribe(x => this.doSomethingWithThrottledEvent(x));
  }

  private doSomethingWithThrottledEvent(width: number) {
    // . . .

  }
}

참조