Angular sin proveedor para NameService

Resuelto M.Svrcek asked hace 9 años • 18 respuestas

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?

M.Svrcek avatar Jun 02 '15 00:06 M.Svrcek
Aceptado

Tienes que usar providersen lugar deinjectables

@Component({
    selector: 'my-app',
    providers: [NameService]
})

Ejemplo de código completo aquí .

Klas Mellbourn avatar Aug 30 '2015 16:08 Klas Mellbourn

En Angular 2 hay tres lugares donde puedes "proporcionar" servicios:

  1. oreja
  2. componente raíz
  3. 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 providersmatriz de su componente raíz:

@Component({
   providers: [NameService],
   ...
)}
export class AppComponent { ... }

Plunker

Si prefiere tener una instancia por componente, utilice la providersmatriz 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.

Mark Rajcok avatar Nov 14 '2015 23:11 Mark Rajcok