Provider und Gültigkeitsbereiche
Steuern Sie, wo Services im Baum verfügbar sind.
Provider und Gültigkeitsbereiche ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.
Provider und Gültigkeitsbereiche
Ein Provider legt fest, wie Angular eine Abhängigkeit erstellt. Der Gültigkeitsbereich, in dem Sie ihn registrieren, bestimmt, wie viele Instanzen existieren und von wem sie gemeinsam verwendet werden.
Root-Gültigkeitsbereich
providedIn: root registriert einen Service im Root-Injektor: ein gemeinsam genutztes Singleton für die gesamte App. Dies ist die häufigste Wahl.
@Injectable({ providedIn: 'root' })
export class AppStore {}Komponenten-Provider
Sie können den Gültigkeitsbereich eines Services auf eine Komponente beschränken, indem Sie ihn im providers-Array der Komponente aufführen. Jede Instanz dieser Komponente erhält eine eigene Instanz des Services.
import { Component } from '@angular/core';
import { LocalStore } from './local-store';
@Component({
selector: 'app-panel',
providers: [LocalStore],
template: ''
})
export class PanelComponent {}Warum ein Komponenten-Gültigkeitsbereich
Verwenden Sie Provider mit Komponenten-Gültigkeitsbereich, wenn jede Komponenteninstanz einen eigenen, isolierten Zustand benötigt, etwa einen Formularzustand oder einen Store pro Widget.
Root im Vergleich zu Komponente
Root: eine überall gemeinsam genutzte Instanz. Komponente: eine Instanz pro Komponenteninstanz (und deren untergeordneten Komponenten). Wählen Sie abhängig davon, ob der Zustand gemeinsam genutzt oder isoliert sein soll.
Die Hierarchie der Injektoren
Die Injektoren von Angular bilden einen Baum. Beim Auflösen einer Abhängigkeit sucht Angular zunächst im Komponenten-Injektor, geht dann zu den übergeordneten Injektoren und schließlich zum Root-Injektor.
Untergeordnete Komponenten erben
Ein Service, der auf einer Komponente bereitgestellt wird, steht auch deren untergeordneten Komponenten zur Verfügung, sofern eine untergeordnete Komponente keine eigene Instanz bereitstellt, die die übergeordnete Instanz überschreibt.
Provider auf Anwendungsebene
Sie können Provider auch beim Bootstrap im providers-Array von bootstrapApplication registrieren. Das ist ähnlich wie der Root-Gültigkeitsbereich und erfolgt häufig über provide*-Funktionen.
// bootstrapApplication(AppComponent, {
// providers: [provideHttpClient()]
// });useClass und useValue
Provider können ein Token mit useClass einer Klasse, mit useValue einem festen Wert oder mit useFactory einer Factory zuordnen. Dadurch werden Ersetzungen und Konfigurationen ermöglicht.
// providers: [{ provide: Logger, useClass: ConsoleLogger }]Implementierungen austauschen
Da ein Provider ein Token einer Implementierung zuordnet, können Sie Implementierungen austauschen, beispielsweise durch einen Mock in Tests, ohne die verwendenden Komponenten zu ändern.
Einen Gültigkeitsbereich auswählen
Verwenden Sie standardmäßig root für gemeinsam genutzte Singletons. Greifen Sie nur dann auf Komponenten-Provider zurück, wenn Sie einen isolierten Zustand pro Instanz benötigen.
Schnelltest: Gültigkeitsbereiche
Zustand pro Instanz.
Zusammenfassung: Provider und Gültigkeitsbereiche
Sie haben gelernt, dass Provider beschreiben, wie Abhängigkeiten erstellt werden, und dass der Gültigkeitsbereich die Instanziierung steuert: root für anwendungsweite Singletons und Komponenten-Provider für die Isolation pro Instanz. Angular löst Abhängigkeiten über eine Hierarchie von Injektoren auf. Mit useClass/useValue/useFactory können Sie Implementierungen austauschen. Als Nächstes folgen Injection Tokens.
Häufig gestellte Fragen
Ist die Lektion „Provider und Gültigkeitsbereiche“ kostenlos?
Ja — der vollständige Text von „Provider und Gültigkeitsbereiche“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Provider und Gültigkeitsbereiche“?
Steuern Sie, wo Services im Baum verfügbar sind. Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Angular Academy zu starten?
Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Provider und Gültigkeitsbereiche“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?
Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Services und Injectable
- Die inject-Funktion
- Provider und Gültigkeitsbereiche
- Injection Tokens