Erstellung eines neuen HTTP-Interceptors in Angular mit dem @Injectable Dekorator

Der Dekorator, der zur Erstellung eines neuen HTTP-Interceptors in Angular verwendet wird, ist @Injectable. Dies mag zunächst verwirrend erscheinen, da der Name @HttpInterceptor intuitiver erscheinen könnte. Aber tatsächlich ist der @Injectable Dekorator der Schlüssel zur Erschaffung neuer HTTP-Interceptors in Angular.

Die @Injectable Dekoration wird verwendet, um anzugeben, dass eine Klasse in einem Injector verfügbar gemacht werden kann. Dies bedeutet, dass Angular weiß, wie und wann sie instanziiert und ihre Abhängigkeiten gelöst werden sollen.

Wenn es um HTTP-Interceptor geht, ist es wichtig zu verstehen, dass sie Teil des HttpClient-Moduls sind. Sie sind Dienste, die Registerkarten auf HTTP-Anforderungen und Antworten auf- und ablaufen, die von Ihrer Anwendung ausgehen und ankommen. Sie können verwendet werden, um Anforderungen zu modifizieren, indem z.B. HTTP-Header hinzugefügt, Antworten zu transformieren oder sogar Anforderungen auf der Grundlage bestimmter Bedingungen zu wiederholen.

Hier ist ein einfaches Beispiel für einen HTTP-Interceptor mit @Injectable Dekorator:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';

@Injectable()
export class CustomHttpInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler) {
    const modifiedReq = req.clone({
      headers: req.headers.set('Custom-Header', 'CustomHeaderValue')
    });
    return next.handle(modifiedReq);
  }
}

In diesem Beispiel wird die @Injectable-Dekoration verwendet, um zu definieren, dass CustomHttpInterceptor ein Dienst ist, der in den Anwendungs-Injector injiziert werden kann. Dann wird die Methode intercept implementiert, welche den Interceptor definiert, der jede ausgehende HTTP-Anfrage abfängt, einen benutzerdefinierten Header hinzufügt und die modifizierte Anfrage weiterleitet.

Es ist zu beachten, dass, nachdem Sie Ihren Interceptor erstellt haben, Sie ihn in Ihrem Module bereitstellen müssen, indem Sie ihn zum HTTP_INTERCEPTORS Token hinzufügen.

Zusätzlich zu @Injectable gibt es im Zusammenhang mit Angular einige andere wichtige Dekoratoren wie @Component, @NgModule und @Directive, die alle jeweils ihre eigenen spezifischen Anwendungsfälle haben. Jedoch ist es in diesem Fall @Injectable, der für die Erstellung von HTTP-Interceptors verwendet wird.