Question

某种方式DI无法为我实例化服务。我收到错误TS2339：Property＆＃39; authenticationService＆＃39;在类型＆＃39; LoginComponent＆＃39; 。

上不存在

如何正确实例化AuthenticationService？我认为在提供商的app.module.ts中提及它会解决这个问题。

提前致谢

这是AuthenticationService.ts：

import { Injectable } from '@angular/core';
import { /*HTTP_PROVIDERS, */Http, Headers } from '@angular/http';
import { AuthHttp } from 'angular2-jwt';

@Injectable()
export class AuthenticationService {

    jwtToken: any;

    constructor(public authHttp: AuthHttp) { }

    jwtHeader = new Headers({
        "Content-Type": "application/json",
        "alg": "HS256",
        "typ": "JWT"
    });


    Login(username: string, password: string) {

        console.log("from authService: " + username);

        this.authHttp.post('/api/AuthResponse',
            JSON.stringify({
                "username:": username,
                "password:": password
            }),
            { headers: this.jwtHeader }
        ).subscribe(data => this.jwtToken = data,
            () => console.log(this.jwtToken));

        return this.jwtToken;
    }

}

这是LoginComponent.ts：

import { Component, OnInit } from '@angular/core';
import { AuthenticationService } from './../../services/AuthenticationService';
import { AuthHttp, AuthConfig/*, AUTH_PROVIDERS, provideAuth*/ } from 'angular2-jwt';

@Component({
    selector: 'login',
    template: require('./login.component.html')
})
export class LoginComponent implements OnInit {
    username;
    password;

    constructor(authenticationService: AuthenticationService){}

    ngOnInit() {
        // reset login status
        //this.authenticationService.logout();

    }

    //private authService: AuthenticationService = new AuthenticationService(new AuthHttp(new AuthConfig(), new Http());

    login()
    {
        console.log(this.username);
        console.log(this.password);
        this.authenticationService.Login(this.username, this.password);
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { UniversalModule } from 'angular2-universal';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AuthHttp, AuthConfig, AUTH_PROVIDERS, provideAuth } from 'angular2-jwt';

import { AuthenticationService } from './services/AuthenticationService';

import { AppComponent } from './components/app/app.component'
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { LoginComponent } from './components/login/login.component';


@NgModule({

    declarations: [
        AppComponent,
        NavMenuComponent,
        CounterComponent,
        FetchDataComponent,
        HomeComponent,
        LoginComponent
    ],
    imports: [
        UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
        FormsModule,
        HttpModule,
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'counter', component: CounterComponent },
            { path: 'fetch-data', component: FetchDataComponent },
            { path: 'login', component: LoginComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ],
    providers: [
        AuthHttp,
        provideAuth({
            headerName: 'Authorization',
            headerPrefix: 'bearer',
            tokenName: 'token',
            tokenGetter: (() => localStorage.getItem('id_token')),
            globalHeaders: [{ 'Content-Type': 'application/json' }],
            noJwtError: true
        }),
        AuthenticationService
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

Answer 1

像这样更改构造函数：

constructor(private authenticationService: AuthenticationService){}

这样您就可以使用authenticationService

访问构造函数外部的this

注意：您也可以使用constructor(public authenticationService: AuthenticationService){}注入只需public / private标识符即可this

Answer 2

如果您尝试与另一模块提供商合作，则应在路由文件中提及

就像您在“ XYZ”中然后在XYZ路由类中尝试“ ABC”

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  providers: [ABC_provider]
})

Angular 2 DI错误

2 个答案: