【Angular活用講座】Rxjsでwindow:resizeイベントから要素のClientWidthを上手く捌くやり方

            
            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(); }
    }

}
        

            
            //...中略

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));

//...中略