typescript - DI-feil i Angular-komponent

Jeg er ganske ny til Angular 2 og Typescript. Jeg har en DI-feil som nedenfor som jeg ikke klarte å løse. Jeg prøvde å forstå hvordan denne DI-en fungerer:

Jeg prøver å lage en enkel påmeldingskomponent som bruker en tjeneste for validering og REST API-operasjoner.

Her er min komponent:

authentication.component.ts

import { Component, Injectable } from '@angular/core';
import { UserService } from './user.service';
import { User } from './user';


@Component({
    moduleId: module.id,
    selector: 'authentication',
    styles: ['input[type=email].ng-invalid {border: 1px solid #dd0000}'],
    template: `
    <h3>Sign Up</h3>
    <hr>

    <form (ngSubmit)="signup()" >
        <input type="email" name="email" required
        [(ngModel)]="user.email"/>
        <input type="password" name="password" required
        [(ngModel)]="user.password"/>
        <input type="submit" />
    </form>
    <span class.has-error>{{hasError}}</span>`
})
@Injectable()
export class AuthenticationComponent {

    public error: Error;
    public user: User;

    constructor(public userService: UserService) {}
    public signup(): void {
        this.userService.init(this.user);
        this.userService.signup().subscribe(
            s=>console.log(s),
            e=>console.log(e)
        )
    }

    get diagnostic () {
        return JSON.stringify(this.user)
    };
}

Og dette er min komponent:

bruker.tjeneste.ts

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { User } from './user';


@Injectable()
export class UserService {

public user: User;

constructor(
    private http: Http,
    private headers: Headers = new Headers({'Content-Type': 'application/json'}),
    private requestOptions: RequestOptions = new RequestOptions({headers: headers})) {}

    public init(user: User) {
        this.user = user;
    }
    signup (): Observable<Response> {
        if (this.user.password !== this.user.passwordConfirm) {
      return Observable.throw(new Error('Şifreleriniz uyuşmuyor!'))
        } else {
          return this.http.post('/signup', this.user, this.requestOptions);
        }
    }
}

Dette er stakken:

Error: DI Error
    at NoProviderError.ZoneAwareError (http://localhost:3000/node_modules/zone.js/dist/zone.js:958:33)
    at NoProviderError.BaseError [as constructor] (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1239:20)
    at NoProviderError.AbstractProviderError [as constructor] (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1365:20)
    at new NoProviderError (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1405:20)
    at ReflectiveInjector_._throwOrNull (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:2937:23)
    at ReflectiveInjector_._getByKeyDefault (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:2976:29)
    at ReflectiveInjector_._getByKey (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:2908:29)
    at ReflectiveInjector_.get (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:2777:25)
    at AppModuleInjector.NgModuleInjector.get (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:8491:56)
    at CompiledTemplate.proxyViewClass.AppView.injectorGet (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:11935:49)
    at CompiledTemplate.proxyViewClass.DebugAppView.injectorGet (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12315:53)
    at ElementInjector.get (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:11790:31)
    at ReflectiveInjector_._getByKeyDefault (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:2973:28)
    at ReflectiveInjector_._getByKey (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:2908:29)
    at ReflectiveInjector_.get (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:2777:25)

Svar #1

Hvis du ikke vil bruke singleton-tjenestemønsteret (det betyr å ha forskjellige instanser begrenset til komponent(er) kun), må du legge providers:[UserService] i @Component-dekoratøren som vist nedenfor,

@Component({
    moduleId: module.id,
    selector: 'authentication',

    providers: [UserService]    ///<<<===here

    styles: ['input[type=email].ng-invalid {border: 1px solid #dd0000}'],
    ...
    ...

})

Men la oss si at hvis du ønsker å ha en enkelt instans av din UserService, må du definere den i @NgModule dekoratøren av din root- eller app-komponent

import { UserService } from './user.service';

@NgModule({
   imports:[...]

   providers:[UserService]      ///<<<===here
   ...
   ...
})

Relaterte artikler