カテゴリー
【Angular活用講座】Rxjsでwindow:resizeイベントから要素のClientWidthを上手く捌くやり方
※ 当ページには【広告/PR】を含む場合があります。
2022/04/25
2022/10/05
Rxjsでのwindow:resizeイベントハンドラの始め方
HogeComponent
#hoge_content
ElementRef
import { Component, OnInit, OnDestroy, ViewChild, ElementRef} from '@angular/core';
import {
Subscription, BehaviorSubject, fromEvent,
throttleTime, distinctUntilChanged, map
} from 'rxjs';
@Component({
selector: 'app-hoge-compo',
template: `
<div class="hoge-wrapper">
<div #hoge_content>
<span>Hello, Hoge!</span>
</div>
</div>
`,
styleUrls: ['./hoge.component.scss']
})
export class HogeComponent implements OnInit, OnDestroy {
@ViewChild('hoge_content', { read: ElementRef, static: true }) hogeContent: ElementRef;
hogeContent$: Subscription;
windowResize$: Subscription;
hogeContent$$: BehaviorSubject<number>;
ngOnInit() {
//👇BehaviorSubjectでターゲット要素のclientWitdhプロパティを監視
this.hogeContent$$ = new BehaviorSubject<number>(this.hogeContent.nativeElement.clientWidth);
//👇rxjsがwindow:resizeのイベントからObservableを購読する
this.windowResize$ = fromEvent(window, 'resize').pipe(
throttleTime(500),
map(_ => this.hogeContent.nativeElement.clientWidth),
distinctUntilChanged((prev: number, curr: number) => {
return prev == curr;
}),
).subscribe((res: number) => this.hogeContent$$.next(res));
//👇画面サイズが変更される度に、BehaviorSubjectからClientWidthが取得できる
this.hogeContent$ = this.hogeContent$$$.subscribe((cw: number) => {
//☆ClientWidthを取得!
console.log(cw);
});
}
ngOnDestroy() {
//👇コンポーネント終了の際の購読を終了することも忘れずに
if (this.hogeContent$) { this.hogeContent$.unsubscribe(); }
if (this.windowResize$) { this.windowResize$.unsubscribe(); }
}
}
window:resizeイベントを捌くポイント〜throttleTimeとdistinctUntilChanged
throttleTime
distinctUntilChanged
//...中略
this.windowResize$ = fromEvent(window, 'resize').pipe(
throttleTime(500), //👈一つ値を通したら、そこから0.5秒以内に来た他の値は捨てる
map(_ => this.hogeContent.nativeElement.clientWidth), //👈ストリームの値を要素のclientWidthとして変換
//👇clientWidthが変わらなければストリームは捨てる
distinctUntilChanged((prev: number, curr: number) => {
return prev == curr;
}),
).subscribe((res: number) => this.hogeContent$$.next(res));
//...中略
window.onscroll
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー