より優れた Angular ウィンドウ

Angular 開発者として、私たちは日々の開発ルーチンの中で多くの課題に直面しています。その 1 つは、グローバル オブジェクトなど、Angular アプリケーション内のネイティブ JavaScript オブジェクトと対話する必要がある場合ですwindow。

私の著書『Learning Angular — 3rd Edition』を読んだことがある方は、Angular が依存関係注入 (DI)に大きく基づいていることをご存じかもしれません。また、ウィンドウなどの非 Angular オブジェクトを直接使用するのではなく、インジェクタブルに変換することが良い方法であると考えられています。なぜ？

Angular フレームワークはクロスプラットフォームです。つまり、モバイルやサーバーなど、さまざまな環境で実行できます。Angular アプリケーションは、サーバー サイド レンダリング (SSR)技術を使用してサーバー上で実行できます。

Angular のクロスプラットフォームの性質について詳しくは、私の記事「Angular フレームワークを選択する理由」を参照してください。

Angular で SSR を使用する場合、オブジェクトはありませんwindow。ブラウザ環境のみでご利用いただけます。この問題を克服し、アプリケーション プラットフォームを認識しないようにするには、 Angular DIメカニズムを通じてウィンドウを提供する必要があります。こうすることで、実行する環境に応じて条件付きでウィンドウを使用し、アプリケーションをサーバー上で適切に動作させることができます。

もう 1 つの理由は、継続的インテグレーション (CI)window環境で単体テストを実行するときにオブジェクトが使用できない可能性があることです。このシナリオでは、Angular DI の恩恵を受けて、単体テストの実行時にオブジェクトの代替実装を提供できます。window

しかし、ウィンドウを注入可能にするにはどうすればよいでしょうか?

Angular フレームワークのInjectionTokenクラスは次のように使用できます。

import { InjectionToken } from '@angular/core';

export const WINDOW = new InjectionToken<Window>('Global window object', {
  factory: () => window
});

1. トークンの簡単な説明
2. トークンの動作を構成するオプション オブジェクト

import { Component, Inject } from '@angular/core';
import { WINDOW } from './window';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(@Inject(WINDOW) private window: Window) {}
}

ネイティブ JavaScriptオブジェクトには、現在のドキュメントに関連付けられたウィンドウを返す というDocumentプロパティが含まれています。defaultViewこれで、Angular コンポーネントを次のように書き換えることができます。

import { DOCUMENT } from '@angular/common';
import { Component, Inject } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(@Inject(DOCUMENT) private document: Document) {
    console.log(document.defaultView);
  }
}

このアプローチは役に立ちましたか? Angular アプリケーションで非 Angular オブジェクトにアクセスするにはどうすればよいですか? 以下のコメント欄でお知らせください

Angular DI とベスト プラクティスについてさらに詳しく知りたい場合は、私の新しい本『Learning Angular — 第 4 版』を今すぐ予約注文してください