フォックスのようなテーマを切り替える🦊 環境光に基づきます💡 あなたの角度アプリで

if ("AmbientLightSensor" in window) {
    // Yay! The Browser has what it takes
}

取り扱いエッジケース

使用ウェブサイトインタフェース

アプリ。モジュールです。TS高橋潤子>クラスをハイライト表示する... "/環境光センサー"サービスからインポートします ngmodule () ... プロバイダ アンビエンスライトサービス { } ウィンドウを提供する。 USEVALUE :ウィンドウ // ... ] ))> クラスの追加モジュール < div >また、メッセージ、エラータイプ、センサーポリシー、センサー名などもたくさんあります.では、定数を定数として公開しましょう.

普通。コンストTS

export const SENSOR_NAME = "AmbientLightSensor";
export const SENSOR_POLICY_NAME = "ambient-light-sensor";
export const ACCESS_DENIED = "denied";
export const THEME_OPTIONS_URL = "/assets/options.json";
export const THEME_BASE_PATH = "node_modules/@angular/material/prebuilt-themes";
export const STYLE_TO_SET = "theme";
export const DARK_THEME = "pink-bluegrey";
export const LIGHT_THEME = "deeppurple-amber";

export const ERROR_TYPES = {
  SECURITY: "SecurityError",
  REFERENCE: "ReferenceError",
  NOT_ALLOWED: "NotAllowedError",
  NOT_READABLE: "NotReadableError"
};

export const ERROR_MESSAGES = {
  UNSUPPORTED_FEATURE: "Your browser doesn't support this feature",
  BLOCKED_BY_FEATURE_POLICY:
    "Sensor construction was blocked by a feature policy.",
  NOT_SUPPORTED_BY_USER_AGENT: "Sensor is not supported by the User-Agent.",
  PREMISSION_DENIED: "Permission to use the ambient light sensor is denied.",
  CANNOT_CONNECT: "Cannot connect to the sensor."
};

環境光センササービスTS

import { ReplaySubject, Observable } from "rxjs";
import { Injectable } from "@angular/core";

import {
  SENSOR_NAME,
  SENSOR_POLICY_NAME,
  ACCESS_DENIED,
  ERROR_TYPES,
  ERROR_MESSAGES
} from "./common.const";

@Injectable()
export class AmbientLightSensorService {
  private illuminance: ReplaySubject <number> = new ReplaySubject <number>(1);
  illuminance$: Observable<number> = this.illuminance.asObservable();

  constructor(private window: Window) {
    try {
      if (SENSOR_NAME in window) {
        this.startReading();
      } else {
        this.illuminance.error(ERROR_MESSAGES.UNSUPPORTED_FEATURE);
      }
    } catch (error) {
      // Handle construction errors.
      if (error.name === ERROR_TYPES.SECURITY) {
        this.illuminance.error(ERROR_MESSAGES.BLOCKED_BY_FEATURE_POLICY);
      } else if (error.name === ERROR_TYPES.REFERENCE) {
        this.illuminance.error(ERROR_MESSAGES.NOT_SUPPORTED_BY_USER_AGENT);
      } else {
        this.illuminance.error(`${error.name}: ${error.message}`);
      }
    }
  }

  private startReading() {
    const sensor = new AmbientLightSensor();
    sensor.onreading = () => this.illuminance.next(sensor.illuminance);
    sensor.onerror = async event => {
      // Handle runtime errors.
      if (event.error.name === ERROR_TYPES.NOT_ALLOWED) {
        // Branch to code for requesting permission.
        const result = await navigator.permissions.query({
          name: SENSOR_POLICY_NAME
        });
        if (result.state === ACCESS_DENIED) {
          this.illuminance.error(ERROR_MESSAGES.PREMISSION_DENIED);
          return;
        }
        this.startReading();
      } else if (event.error.name === ERROR_TYPES.NOT_READABLE) {
        this.illuminance.error(ERROR_MESSAGES.CANNOT_CONNECT);
      }
    };
    sensor.start();
  }
}

ヘッダ.コンポーネント.TS

import { Component, OnDestroy, OnInit } from "@angular/core";
import { MatSnackBar } from "@angular/material/snack-bar";
import { Observable, Subject } from "rxjs";
import { takeUntil } from "rxjs/operators";

import { AmbientLightSensorService } from "../ambient-light-sensor.service";
import { DARK_THEME, LIGHT_THEME } from "../common.const";
import { Option } from "../option.model";
import { ThemeService } from "../theme.service";

@Component({
  selector: "app-header",
  templateUrl: "./header.component.html",
  styleUrls: ["./header.component.css"]
})
export class HeaderComponent implements OnInit, OnDestroy {
  options$: Observable<Array<Option>> = this.themeService.getThemeOptions();
  private unsubscribe$ = new Subject<void>();

  constructor(
    private readonly themeService: ThemeService,
    private readonly alsService: AmbientLightSensorService,
    private readonly snackBar: MatSnackBar
  ) {}

  ngOnInit() {
    this.themeService.setTheme(DARK_THEME);
    this.alsService.illuminance$
      .pipe(takeUntil(this.unsubscribe$))
      .subscribe(
        illuminance => {
          illuminance <= 10
            ? this.themeService.setTheme(DARK_THEME)
            : this.themeService.setTheme(LIGHT_THEME);
        },
        error => this.showMessage(error)
      );
  }

  themeChangeHandler(themeToSet) {
    this.themeService.setTheme(themeToSet);
  }

  ngOnDestroy() {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }

  private showMessage(messageToShow) {
    this.snackBar.open(messageToShow, "OK", {
      duration: 4000
    });
  }
}

Read more about this approach in this article on AngularInDepth by Tomas Trajan

< source >
<<>
<> P >
上で見ることができるように、ブラウザのサポートは、現時点では素晴らしいことではありません.しかし、我々は少なくとも世界で最も良いブラウザー(Ahem Chrome Ahem)でこれをテストしますp >
そのためには、まずフラグを有効にしなければなりません.
だから私は行きますchrome://flags/#enable-generic-sensor-extra-classes と私の携帯電話でそれを有効にする(私のラップトップは、それに周囲の光センサーを持っていない).それから、電話でブラウザを再起動します.p >
<小野寺>
<高橋>https://www.youtube.com/embed/CEQTOn1OILo"allowfulscreen = ""読み込み= "lazy "
< iframe >
<> P >
< P >

クロージングノート🎉

Icon Courtesy: Angular Material AngularioプレスキットCSS 名詞プロジェクトからのMonkikによってLight sensor 名詞プロジェクトからのAdnen Kadriによって
次に次まで.👋🏻