Saya punya masalah memuat kelas ke komponen Angular. Saya sudah mencoba menyelesaikannya untuk waktu yang lama; Saya bahkan sudah mencoba menggabungkan semuanya dalam satu file. Apa yang saya miliki adalah:
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);
layanan / NameService.ts
export class NameService {
names: Array<string>;
constructor() {
this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
}
getNames()
{
return this.names;
}
}
Saya terus menerima pesan kesalahan yang mengatakan No provider for NameService
.
Dapatkah seseorang membantu saya menemukan masalah dengan kode saya?
typescript
angular
systemjs
M.Svrcek
sumber
sumber
Jawaban:
Anda harus menggunakan
providers
sebagai gantinyainjectables
Lengkapi contoh kode di sini .
sumber
providers
karya pada beta terbaru (beta 0).bindings
Di Angular 2 ada tiga tempat Anda dapat "menyediakan" layanan:
"Opsi penyedia bootstrap dimaksudkan untuk mengonfigurasi dan menimpa layanan pra-registrasi Angular sendiri, seperti dukungan peruteannya." - referensi
Jika Anda hanya ingin satu instance NameService di seluruh aplikasi Anda (yaitu, Singleton), maka sertakan dalam
providers
array komponen root Anda:Plunker
Jika Anda lebih suka memiliki satu instance per komponen, gunakan
providers
array di objek konfigurasi komponen sebagai gantinya:Lihat dokumen Hierarchical Injectors untuk informasi lebih lanjut.
sumber
Pada Angular 2 Beta:
Tambahkan
@Injectable
ke layanan Anda sebagai:dan ke konfigurasi komponen Anda tambahkan
providers
sebagai:sumber
Anda harus menyuntikkan
NameService
dalamproviders
array AndaAppModule
'sNgModule
metadata.Jika Anda ingin membuat Ketergantungan untuk tingkat komponen tertentu tanpa peduli tentang keadaan aplikasi Anda, maka Anda dapat menyuntikkan ketergantungan itu pada
providers
opsi metadata komponen seperti jawaban @Klass diterima yang diperlihatkan.sumber
DataManagerService
ada@Injectable
dekorator di atasnya?Secara mengejutkan, sintaks telah berubah lagi dalam versi terbaru Angular :-) Dari Angular 6 docs :
src / app / user.service.0.ts
sumber
Anda harus menyuntikkan NameService di dalam array penyedia metadata NgModule AppModule Anda.
dan pastikan impor di komponen Anda dengan nama yang sama (case sensitive), karena SystemJs case sensitive (sesuai desain). Jika Anda menggunakan nama jalur berbeda di file proyek Anda seperti ini:
main.module.ts
your-component.ts
maka Sistem js akan membuat impor ganda
sumber
Di Angular v2 dan lebih tinggi sekarang:
@Component({ selector:'my-app', providers: [NameService], template: ... })
sumber
Angular 2 telah berubah, berikut tampilan bagian atas kode Anda:
Selain itu, Anda mungkin ingin menggunakan getter dan setter dalam layanan Anda:
Kemudian di aplikasi Anda, Anda cukup melakukan:
Saya sarankan Anda pergi ke plnkr.co dan membuat plunk Angular 2 (ES6) baru dan membuatnya bekerja di sana terlebih dahulu. Ini akan mengatur segalanya untuk Anda. Setelah berhasil di sana, salin ke lingkungan Anda yang lain dan atasi masalah apa pun dengan lingkungan itu.
sumber
Kesalahan
No provider for NameService
adalah masalah umum yang dihadapi banyak pemula Angular2.Alasan : Sebelum menggunakan layanan khusus, Anda harus mendaftarkannya terlebih dahulu ke NgModule dengan menambahkannya ke daftar penyedia:
Larutan:
sumber
Anda juga bisa meminta dependensi dideklarasikan dalam perintah bootstrap seperti:
Setidaknya itulah yang bekerja untuk saya di alpha40.
ini tautannya: http://www.syntaxsuccess.com/viewarticle/dependency-injection-in-angular-2.0
sumber
Hai, Anda dapat menggunakan ini dalam file .ts Anda:
pertama-tama impor layanan Anda dalam file .ts ini:
Kemudian dalam file yang sama Anda dapat menambahkan
providers: [Your_Service_Name]
:sumber
Tambahkan ke penyedia bukan suntik
sumber
Di Angular Anda dapat mendaftarkan layanan dengan dua cara:
1. Daftarkan layanan dalam modul atau komponen root
Efek:
Anda harus berhati-hati jika mendaftarkan layanan ke modul malas yang dimuat:
Layanan hanya tersedia ke komponen yang dinyatakan dalam modul itu
Layanan akan tersedia pada aplikasi seumur hidup hanya ketika modul dimuat
2. Daftarkan layanan ke komponen aplikasi lainnya
Efek:
Anda harus berhati-hati jika mendaftarkan layanan ke komponen aplikasi lainnya
Mesin virtual dari layanan yang disuntikkan akan tersedia hanya ke dalam komponen dan semua anak-anaknya.
Mesin virtual akan tersedia pada masa pakai komponen.
sumber
Anda perlu menambahkannya ke array penyedia, yang mencakup semua keadaan pada komponen Anda.
Lihatlah bagian ini dalam dokumentasi sudut:
Jadi dalam kasus Anda, cukup ganti suntikan ke penyedia seperti di bawah ini:
Juga di versi baru Angular, @View dan beberapa barang lainnya hilang.
Untuk info lebih lanjut, kunjungi di sini .
sumber
tambahkan layanan Anda ke array penyedia [] dalam file app.module.ts. Seperti di bawah ini
// di sini layanan saya adalah CarService
app.module.ts
sumber
Angular2 mengharuskan Anda untuk mendeklarasikan semua injeksi dalam panggilan fungsi bootstrap. Tanpa ini layanan Anda bukanlah objek yang dapat disuntikkan.
sumber
providers
array di objek konfigurasi komponen. Jika dimasukkan dalamproviders
array, kami mendapatkan satu instance per komponen terikat. Lihat dokumen Hierarchical Injectors untuk informasi lebih lanjut.Tambahkan @Injectable ke layanan Anda sebagai:
dan di komponen Anda tambahkan penyedia sebagai:
atau jika Anda ingin mengakses layanan Anda di seluruh aplikasi, Anda dapat mengirimkan penyedia aplikasi
sumber
Mendaftarkan penyedia dalam suatu komponen
Berikut adalah HeroesComponent yang direvisi yang mendaftarkan HeroService dalam larik penyedianya.
sumber