Angularjs依赖注入不起作用

时间:2016-11-21 12:15:28

标签: javascript angular dependency-injection

我刚刚安装了Angular 2的全新安装。但是,当我尝试将名为TestService的服务注入此类登录component时:

LoginComponent:

import {Component, Inject} from '@angular/core';

@Component({
  selector: 'app-login',
  template: `
      {{ test.test }}
  `,
  styles: []
})
export class LoginComponent {
  constructor(@Inject('test') private test){};
}

应用

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import {TestService} from "./test.service";

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [{provide: 'test', useClass:TestService}],
  bootstrap: [AppComponent]
})
export class AppModule { }

TestService的

import { Injectable } from '@angular/core';

@Injectable()
export class TestService {
  test = 'test';
  constructor() { }
}

我收到错误:

error_handler.js:47EXCEPTION: Error in ./AppComponent class AppComponent - inline template:1:25 caused by: Cannot read property 'name' of undefined

我做错了什么?

1 个答案:

答案 0 :(得分:3)

在视图中,您应该使用Elvis Operator。只是为了确保test属性会在test上询问。当前发生初始更改检测时test.test尝试评估视图上的绑定。由于最初test未定义test.test失败。

{{ test?.test }}