Wie funktioniert die hierarchische Abhängigkeitsinjektion in Angular?

Question

Accepted Answer

Angulars DI ist **hierarchisch**: Injektoren bilden einen Baum, der den Komponenten-/Modulbaum widerspiegelt. Wenn eine Komponente eine Abhängigkeit anfordert, geht Angular den Injektorebaum **nach oben**, bis sie einen Provider findet — der bestimmt, ob Sie eine geteilte Singleton-Instanz oder eine separate Instanz pro Komponente erhalten. ## Warum es wichtig ist ```text Root injector (app-wide) ← providedIn: 'root' lives here (one singleton) └─ Module/Route injectors └─ Component injector ← providers: [...] in @Component └─ Child component injector ``` Eine Suche beginnt bei der anfordernden Komponente und steigt bis zur Wurzel auf. Der **erste** gefundene Provider gewinnt. ## Wo Sie einen Provider definieren, bestimmt den Bereich ```ts // 1. App-wide singleton — ONE instance shared everywhere @Injectable({ providedIn: "root" }) export class AuthService {} // 2. Component-scoped — a NEW instance per component (and its children) @Component({ selector: "app-widget", providers: [DataService], // each gets its OWN DataService }) export class WidgetComponent {} ``` Dies ist der Schlüsselhebel: `providedIn: 'root'` ergibt eine einzige gemeinsame Instanz; das Auflisten eines Providers im `providers`-Array einer Komponente erzeugt eine neue Instanz, die auf diesen Komponentenunterbaum beschränkt ist (nützlich zum Isolieren des Status pro Komponente). ## Injektionsmodifizierer ```ts constructor( @Optional() private logger: Logger, // null instead of error if not provided @Self() private local: LocalService, // only look in THIS injector @SkipSelf() private parent: ParentService, // skip self, start at the parent @Host() private host: HostService, // stop at the host component ) {} ``` Diese Dekoratoren steuern, *wie weit* Angular den Injektorebaum durchsucht — z. B. vermeidet `@Optional` einen Fehler, wenn eine Abhängigkeit fehlt, `@SkipSelf` erzwingt die Verwendung einer übergeordneten Instanz. ## Injektionstoken für Nicht-Klassen-Abhängigkeiten ```ts export const API_URL = new InjectionToken("apiUrl"); // provide: { provide: API_URL, useValue: "https://api.example.com" } constructor(@Inject(API_URL) private apiUrl: string) {} ``` Token ermöglichen es Ihnen, Werte/Konfiguration zu injizieren (nicht nur Klassen) und Implementierungen auszutauschen (`useClass`, `useValue`, `useFactory`). ## Warum es wichtig ist Das Verständnis des hierarchischen Injektors erklärt, *warum* ein Service app-weit geteilt ist im Vergleich zu dupliziert pro Komponente — eine häufige Quelle für Verwirung wie "Warum teilen diese Komponenten den Status oder nicht?". Die Kontrolle des Provider-Bereichs (`root` versus Komponenten `providers`), die Verwendung von Modifizierern (`@Optional`, `@SkipSelf`) und Injektionstoken für Konfiguration/austauschbare Implementierungen ist das, was Angulars DI sowohl für Architektur als auch für Tests leistungsstarks macht.