Lepsze okno Angular

Jako programiści Angular stajemy przed wieloma wyzwaniami w naszej codziennej rutynie programistycznej. Jednym z nich jest sytuacja, w której musimy wejść w interakcję z natywnym obiektem JavaScript w aplikacji Angular, na przykład windowobiektem globalnym.

Jeśli czytałeś moją książkę Learning Angular — 3rd Edition , być może wiesz, że Angular jest mocno oparty na wstrzykiwaniu zależności (DI) . I że uważa się za dobrą praktykę przekształcanie obiektów innych niż Angular, takich jak okno, w obiekty do wstrzykiwania zamiast używania ich bezpośrednio. Dlaczego?

Framework Angular jest wieloplatformowy, co oznacza, że ​​może działać w różnych środowiskach, takich jak urządzenia mobilne i serwery. Aplikacja Angular może działać na serwerze przy użyciu techniki Server Side Rendering (SSR) .

Aby uzyskać więcej informacji na temat wieloplatformowej natury Angular, zapoznaj się z moim artykułem Dlaczego warto wybrać platformę Angular .

Kiedy używamy SSR w Angular, nie ma windowobiektu. Jest dostępny tylko w środowisku przeglądarki. Aby przezwyciężyć ten problem i uczynić naszą platformę aplikacji nieświadomą, musimy udostępnić okno poprzez mechanizm Angular DI . W ten sposób możemy warunkowo korzystać z okna zgodnie z uruchamianym przez nas środowiskiem i sprawić, by nasza aplikacja działała poprawnie na serwerze.

Innym powodem jest to, że windowobiekt może być niedostępny podczas uruchamiania testów jednostkowych w środowisku ciągłej integracji (CI) . W tym scenariuszu moglibyśmy skorzystać z Angular DI i zapewnić alternatywną implementację obiektu windowpodczas wykonywania testów jednostkowych.

Ale jak sprawić, by okno można było wstrzykiwać?

Możemy użyć klasy InjectionToken frameworka Angular w następujący sposób:

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

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

1. Prosty opis tokena
2. Obiekt opcji, który konfiguruje zachowanie tokenu

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) {}
}

Natywny Documentobiekt JavaScript zawiera właściwość o nazwie defaultView, która zwraca okno powiązane z bieżącym dokumentem. Możemy teraz przepisać nasz komponent Angular w następujący sposób:

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

Czy to podejście było dla Ciebie przydatne? Jak uzyskać dostęp do obiektów innych niż Angular w aplikacjach Angular? Dajcie znać w komentarzach poniżej

Jeśli chcesz dowiedzieć się więcej o Angular DI i najlepszych praktykach, możesz już teraz zamówić w przedsprzedaży moją nową książkę Learning Angular — wydanie 4