Angular sin proveedor para NameService
Tengo un problema al cargar una clase en un componente Angular. Llevo mucho tiempo intentando solucionarlo; Incluso he intentado unirlo todo en un solo archivo. Lo que tengo es:
Aplicación.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);
servicios/NameService.ts
export class NameService {
names: Array<string>;
constructor() {
this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
}
getNames()
{
return this.names;
}
}
Sigo recibiendo un mensaje de error que dice No provider for NameService
.
¿Alguien puede ayudarme a detectar el problema con mi código?
Tienes que usar providers
en lugar deinjectables
@Component({
selector: 'my-app',
providers: [NameService]
})
Ejemplo de código completo aquí .
En Angular 2 hay tres lugares donde puedes "proporcionar" servicios:
- oreja
- componente raíz
- otros componentes o directivas
"La opción del proveedor de arranque está destinada a configurar y anular los propios servicios preregistrados de Angular, como su soporte de enrutamiento". -- referencia
Si solo desea una instancia de NameService en toda su aplicación (es decir, Singleton), inclúyala en la providers
matriz de su componente raíz:
@Component({
providers: [NameService],
...
)}
export class AppComponent { ... }
Plunker
Si prefiere tener una instancia por componente, utilice la providers
matriz en el objeto de configuración del componente:
@Component({
providers: [NameService],
...
)}
export class SomeOtherComponentOrDirective { ... }
Consulte el documento Inyectores jerárquicos para obtener más información.