不知何故,DI无法为我实例化服务.
我收到错误TS2339:属性’authenticationService’在类型’LoginComponent’上不存在.
我收到错误TS2339:属性’authenticationService’在类型’LoginComponent’上不存在.
如何正确实例化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,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,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 { }