Device Service

export class Component implements OnInit, OnDestroy {}

private readonly _deviceService = inject(DeviceService);
private readonly _cdr = inject(ChangeDetectorRef);
private readonly _destroy$ = new Subject();

@Input() public isMobile: boolean;

public ngOnInit(): void {
    this._getDevice();
}

public ngOnDestroy(): void {
    this._destroy$.next(null);
    this._destroy$.complete();
  }

public get classes(): string[] {
  const deviceType = this.isMobile ? 'mobile' : 'desktop';
  return [deviceType];
}

private _getDevice(): void {
  this._deviceService.isMobileObs$.pipe(takeUntil(this._destroy$)).subscribe((isMobile) => {
    this.isMobile = isMobile;
    this._cdr.markForCheck();
  });
}

---

import { BreakpointObserver, Breakpoints, BreakpointState } from '@angular/cdk/layout';
import { inject, Injectable, OnDestroy } from '@angular/core';
import { DeviceType } from '@app/shared/enums';
import { BehaviorSubject, Subject, takeUntil } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DeviceService implements OnDestroy {
  private readonly _breakpointObserver = inject(BreakpointObserver);
  private readonly _deviceTypeBs$ = new BehaviorSubject<DeviceType>(DeviceType.DESKTOP);
  private readonly _isMobileBs$ = new BehaviorSubject<boolean>(false);
  private readonly _destroy$ = new Subject();
  public readonly deviceTypeObs$ = this._deviceTypeBs$.asObservable();
  public readonly isMobileObs$ = this._isMobileBs$.asObservable();

  public get deviceType(): DeviceType {
    return this._deviceTypeBs$.value;
  }

  public set deviceType(deviceType: DeviceType) {
    this._deviceTypeBs$.next(deviceType);
    this.isMobile = deviceType === DeviceType.MOBILE;
  }

  public get isMobile(): boolean {
    return this._isMobileBs$.value;
  }

  public set isMobile(isMobile: boolean) {
    this._isMobileBs$.next(isMobile);
  }

  public constructor() {
    this._breakpointObserver
      .observe([Breakpoints.XSmall, Breakpoints.Small])
      .pipe(takeUntil(this._destroy$))
      .subscribe(
        (state: BreakpointState) => (this.deviceType = state.matches ? DeviceType.MOBILE : DeviceType.DESKTOP)
      );
  }

  public ngOnDestroy(): void {
    this._destroy$.next(null);
    this._destroy$.complete();
  }
}

Ez az Angular kód egy Component osztályt definiál, amely implementálja az OnInit és az OnDestroy interfészeket. Íme, mit csinál részletesen:

1. Attribútumok:

• isMobile: Ez egy boolean típusú attribútum, amely azt jelzi, hogy az eszköz mobil-e vagy sem.
• destroy$: Egy Subject, amelyet a komponens elpusztításakor használnak a megfigyelések befejezésére.

1. Konstruktor:

• deviceService: Egy szolgáltatás, amely információt nyújt arról, hogy az eszköz mobil-e.
• cdr: A ChangeDetectorRef szolgáltatás, amelyet a komponens változásainak észlelésére használnak.

1. ngOnInit metódus:

• Ez a metódus az Angular életciklusának része, és akkor fut le, amikor a komponens inicializálódik.
• Feliratkozik a deviceService.isMobileObs$ Observable-re, hogy figyelje, az eszköz mobil-e vagy sem.
• A feliratkozás során frissíti az isMobile attribútumot az aktuális értékkel és jelzi az ChangeDetectorRef-nek, hogy ellenőrizze a változásokat (markForCheck).

1. ngOnDestroy metódus:

• Ez a metódus az Angular életciklusának része, és akkor fut le, amikor a komponens elpusztul.
• Ekkor jelet küld a destroy$ Subject-nek (next), és befejezi azt (complete), ezzel biztosítva, hogy minden feliratkozás megszűnjön és az erőforrások felszabaduljanak.

Összefoglalva:

Ez a komponens figyeli, hogy az eszköz mobil-e a deviceService segítségével, és frissíti a komponens állapotát ennek megfelelően. Az erőforrások megfelelő kezelése érdekében a komponens elpusztításakor minden feliratkozást megszüntet.