Ich habe ein Problem beim Laden einer Klasse in eine Angular-Komponente. Ich habe lange versucht, es zu lösen; Ich habe sogar versucht, alles in einer einzigen Datei zusammenzufügen. Was ich habe ist:
Application.ts
/// <reference path="../typings/angular2/angular2.d.ts" />
import {Component,View,bootstrap,NgFor} from "angular2/angular2";
import {NameService} from "./services/NameService";
@Component({
selector:'my-app',
injectables: [NameService]
})
@View({
template:'<h1>Hi {{name}}</h1>' +
'<p>Friends</p>' +
'<ul>' +
' <li *ng-for="#name of names">{{name}}</li>' +
'</ul>',
directives:[NgFor]
})
class MyAppComponent
{
name:string;
names:Array<string>;
constructor(nameService:NameService)
{
this.name = 'Michal';
this.names = nameService.getNames();
}
}
bootstrap(MyAppComponent);
services / NameService.ts
export class NameService {
names: Array<string>;
constructor() {
this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
}
getNames()
{
return this.names;
}
}
Ich erhalte immer wieder eine Fehlermeldung No provider for NameService
.
Kann mir jemand helfen, das Problem mit meinem Code zu erkennen?
typescript
angular
systemjs
M.Svrcek
quelle
quelle
Antworten:
Sie müssen
providers
anstelle von verwendeninjectables
Vollständiges Codebeispiel hier .
quelle
providers
Arbeiten mit der neuesten Beta (Beta 0).bindings
In Angular 2 gibt es drei Orte, an denen Sie Dienste "bereitstellen" können:
"Die Bootstrap-Provider-Option dient zum Konfigurieren und Überschreiben von Angulars eigenen vorregistrierten Diensten, z. B. der Routing-Unterstützung." - Referenz
Wenn Sie nur eine Instanz von NameService für Ihre gesamte App (z. B. Singleton) möchten, fügen Sie diese in das
providers
Array Ihrer Stammkomponente ein :Plunker
Wenn Sie lieber eine Instanz pro Komponente haben möchten, verwenden Sie
providers
stattdessen das Array im Konfigurationsobjekt der Komponente:Siehe die Hierarchical Injectors doc für weitere Informationen.
quelle
Ab Angular 2 Beta:
Fügen Sie
@Injectable
Ihrem Service Folgendes hinzu:und fügen Sie Ihrer Komponentenkonfiguration Folgendes hinzu
providers
:quelle
Sie sollten durch Einspritzen
NameService
innerhalbproviders
Array IhrerAppModule
‚sNgModule
Metadaten.Wenn Sie eine Abhängigkeit für eine bestimmte Komponentenebene erstellen möchten, ohne sich um den Status Ihrer Anwendung zu kümmern, können Sie diese Abhängigkeit von der
providers
Option für Komponentenmetadaten wie die angezeigte akzeptierte @ Klassen- Antwort einfügen .quelle
DataManagerService
hat@Injectable
Dekorateur darüber?Erstaunlicherweise hat sich die Syntax in der neuesten Version von Angular erneut geändert :-) Aus den Angular 6-Dokumenten :
src / app / user.service.0.ts
quelle
Sie sollten NameService in das Provider-Array der NgModule-Metadaten Ihres AppModule einfügen.
und stellen Sie sicher, dass Sie in Ihre Komponente denselben Namen importieren (Groß- und Kleinschreibung beachten), da bei SystemJs die Groß- und Kleinschreibung beachtet wird (beabsichtigt). Wenn Sie in Ihren Projektdateien einen anderen Pfadnamen wie folgt verwenden:
main.module.ts
your-component.ts
dann führt System js doppelte Importe durch
quelle
In Angular v2 und höher ist es jetzt:
@Component({ selector:'my-app', providers: [NameService], template: ... })
quelle
Winkel 2 hat sich geändert. So sollte der obere Teil Ihres Codes aussehen:
Möglicherweise möchten Sie auch Getter und Setter in Ihrem Dienst verwenden:
Dann können Sie in Ihrer App einfach Folgendes tun:
Ich schlage vor, Sie gehen zu plnkr.co und erstellen einen neuen Angular 2 (ES6) -Plunk, damit er dort zuerst funktioniert. Es wird alles für Sie einrichten. Sobald es dort funktioniert, kopieren Sie es in Ihre andere Umgebung und untersuchen Sie alle Probleme mit dieser Umgebung.
quelle
Der Fehler
No provider for NameService
ist ein häufiges Problem, mit dem viele Angular2-Anfänger konfrontiert sind.Grund : Bevor Sie einen benutzerdefinierten Dienst verwenden können, müssen Sie ihn zunächst bei NgModule registrieren, indem Sie ihn zur Anbieterliste hinzufügen:
Lösung:
quelle
Sie können die Abhängigkeiten auch im Bootstrap-Befehl wie folgt deklarieren lassen:
Zumindest hat das bei mir in alpha40 funktioniert.
Dies ist der Link: http://www.syntaxsuccess.com/viewarticle/dependency-injection-in-angular-2.0
quelle
Hallo, Sie können dies in Ihrer .ts-Datei verwenden:
Importieren Sie zuerst Ihren Dienst in diese .ts-Datei:
Dann können Sie in derselben Datei Folgendes hinzufügen
providers: [Your_Service_Name]
:quelle
Fügen Sie es Anbietern hinzu, die nicht injizierbar sind
quelle
In Angular können Sie einen Dienst auf zwei Arten registrieren:
1. Registrieren Sie einen Dienst im Modul oder in der Stammkomponente
Auswirkungen:
Sie sollten vorsichtig sein, wenn Sie einen Dienst in einem faul geladenen Modul registrieren:
Der Dienst ist nur für Komponenten verfügbar, die in diesem Modul deklariert sind
Der Dienst ist bei lebenslanger Anwendung nur verfügbar, wenn das Modul geladen ist
2. Registrieren Sie einen Dienst in einer anderen Anwendungskomponente
Auswirkungen:
Sie sollten vorsichtig sein, wenn Sie einen Dienst in einer anderen Anwendungskomponente registrieren
Die Instanz des injizierten Dienstes ist nur für die Komponente und alle untergeordneten Komponenten verfügbar.
Die Instanz ist während der Lebensdauer der Komponente verfügbar.
quelle
Sie müssen es dem Provider-Array hinzufügen, das alle Abhängigkeiten von Ihrer Komponente enthält.
Schauen Sie sich diesen Abschnitt in der eckigen Dokumentation an:
Ändern Sie in Ihrem Fall einfach die injizierbaren Elemente in Anbieter wie die folgenden:
Auch in den neuen Versionen von Angular sind @View und einige andere Sachen weg.
Weitere Informationen finden Sie hier .
quelle
Fügen Sie Ihren Dienst dem Array provider [] in der Datei app.module.ts hinzu. Wie unten
// hier ist mein Service CarService
app.module.ts
quelle
Bei Angular2 müssen Sie alle injizierbaren Dateien im Bootstrap-Funktionsaufruf deklarieren. Ohne dies ist Ihr Service kein injizierbares Objekt.
quelle
providers
Array im Konfigurationsobjekt der Komponente aufnehmen. Wenn es improviders
Array enthalten ist, erhalten wir eine Instanz pro gebundener Komponente. Siehe die Hierarchical Injectors doc für weitere Informationen.Fügen Sie @Injectable zu Ihrem Service hinzu als:
und fügen Sie in Ihrer Komponente die Anbieter hinzu als:
oder wenn Sie über die gesamte Anwendung auf Ihren Dienst zugreifen möchten, können Sie den App-Anbieter übergeben
quelle
Registrieren von Anbietern in einer Komponente
Hier ist eine überarbeitete HeroesComponent, die den HeroService in seinem Provider-Array registriert.
quelle