Mam problem z ładowaniem klasy do komponentu Angular. Od dłuższego czasu próbuję go rozwiązać; Próbowałem nawet połączyć to wszystko w jednym pliku. Mam:
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;
}
}
Wciąż pojawia się komunikat o błędzie No provider for NameService
.
Czy ktoś może mi pomóc w wykryciu problemu z moim kodem?
typescript
angular
systemjs
M.Svrcek
źródło
źródło
Odpowiedzi:
Musisz użyć
providers
zamiastinjectables
Wypełnij przykładowy kod tutaj .
źródło
providers
z najnowszej wersji beta (beta 0).bindings
W Angular 2 są trzy miejsca, w których możesz „świadczyć” usługi:
„Opcja dostawcy ładowania początkowego służy do konfigurowania i zastępowania własnych wstępnie zarejestrowanych usług Angular, takich jak obsługa routingu”. - odniesienie
Jeśli chcesz mieć tylko jedno wystąpienie usługi NameService w całej aplikacji (tj. Singleton), dołącz ją do
providers
tablicy głównego komponentu:Plunker
Jeśli wolisz mieć jedną instancję na komponent, zamiast tego użyj
providers
tablicy w obiekcie konfiguracyjnym komponentu:Więcej informacji można znaleźć w dokumencie Hierarchical Injectors .
źródło
Od Angular 2 Beta:
Dodaj
@Injectable
do swojej usługi jako:i do konfiguracji swojego komponentu dodaj
providers
:źródło
Powinieneś być wstrzykiwanie
NameService
wewnątrzproviders
tablicę swojąAppModule
„sNgModule
metadanych.Jeśli chcesz utworzyć zależność dla określonego poziomu komponentu bez zawracania sobie głowy stanem aplikacji, możesz wstrzyknąć tę zależność do
providers
opcji metadanych komponentów , takich jak wyświetlana zaakceptowana odpowiedź @Klass .źródło
DataManagerService
ma@Injectable
nad tym dekoratora?Szokująco, składnia zmieniła się ponownie w najnowszej wersji Angulara :-) Z dokumentacji Angulara 6 :
src / app / user.service.0.ts
źródło
Powinieneś wstrzykiwać NameService do tablicy dostawców metadanych NgModule swojego AppModule.
i pamiętaj, aby zaimportować do komponentu tę samą nazwę (rozróżnia duże i małe litery), ponieważ SystemJs rozróżnia małe i wielkie litery (zgodnie z projektem). Jeśli użyjesz innej nazwy ścieżki w plikach projektu, takich jak to:
main.module.ts
twój-komponent.ts
wtedy System js wykona podwójny import
źródło
W Angular v2 i nowszych jest teraz:
@Component({ selector:'my-app', providers: [NameService], template: ... })
źródło
Angular 2 zmienił się, oto jak powinna wyglądać góra twojego kodu:
Możesz także skorzystać z funkcji pobierających i ustawiających w swojej usłudze:
Następnie w swojej aplikacji możesz po prostu zrobić:
Sugeruję, aby przejść do strony plnkr.co i utworzyć nową wersję Angular 2 (ES6) i sprawić, by najpierw tam działała. Wszystko skonfiguruje dla Ciebie. Gdy już tam zacznie działać, skopiuj go do innego środowiska i sprawdź wszystkie problemy z tym środowiskiem.
źródło
Błąd
No provider for NameService
jest częstym problemem, z którym boryka się wielu początkujących Angular2.Powód : Przed użyciem dowolnej usługi niestandardowej musisz najpierw zarejestrować ją w NgModule, dodając ją do listy dostawców:
Rozwiązanie:
źródło
Można również zadeklarować zależności w poleceniu bootstrap, takie jak:
Przynajmniej to działało dla mnie w alpha40.
to jest link: http://www.syntaxsuccess.com/viewarticle/dependency-injection-in-angular-2.0
źródło
Cześć. Możesz użyć tego w swoim pliku .ts:
najpierw zaimportuj usługę do tego pliku .ts:
Następnie w tym samym pliku możesz dodać
providers: [Your_Service_Name]
:źródło
Dodaj go do dostawców, których nie można wstrzykiwać
źródło
W Angular możesz zarejestrować usługę na dwa sposoby:
1. Zarejestruj usługę w module lub komponencie głównym
Efekty:
Zachowaj ostrożność, jeśli zarejestrujesz usługę w leniwie załadowanym module:
Usługa jest dostępna tylko dla komponentów zadeklarowanych w tym module
Usługa będzie dostępna dożywotniej aplikacji tylko po załadowaniu modułu
2. Zarejestruj usługę w dowolnym innym komponencie aplikacji
Efekty:
Należy zachować ostrożność, jeśli zarejestrujesz usługę w jakimkolwiek innym komponencie aplikacji
Instancja wstrzykniętej usługi będzie dostępna tylko dla komponentu i wszystkich jego elementów podrzędnych.
Instancja będzie dostępna przez cały okres istnienia komponentu.
źródło
Musisz dodać go do tablicy dostawców, która obejmuje wszystkie zależności od twojego komponentu.
Spójrz na ten rozdział w dokumentacji kątowej:
Więc w twoim przypadku, po prostu zmień zastrzyki na dostawców takich jak poniżej:
Również w nowych wersjach Angular, @View i niektórych innych rzeczach już nie ma.
Aby uzyskać więcej informacji, odwiedź tutaj .
źródło
dodaj swoją usługę do tablicy dostawców [] w pliku app.module.ts. Jak poniżej
// tutaj moja usługa to CarService
app.module.ts
źródło
Angular2 wymaga zadeklarowania wszystkich elementów do wstrzykiwania w wywołaniu funkcji bootstrap. Bez tego twoja usługa nie jest przedmiotem do wstrzyknięcia.
źródło
providers
tablicy w obiekcie konfiguracyjnym komponentu. Jeśli jest uwzględniony wproviders
tablicy, otrzymujemy jedną instancję na związany komponent. Więcej informacji można znaleźć w dokumencie Hierarchical Injectors .Dodaj @Injectable do swojej usługi jako:
i w swoim komponencie dodaj dostawców jako:
lub jeśli chcesz uzyskać dostęp do swojej usługi w całej aplikacji, możesz przekazać dostawcę aplikacji
źródło
Rejestrowanie dostawców w komponencie
Oto zmieniony HeroesComponent, który rejestruje usługę HeroService w tablicy dostawców.
źródło