Angularjs依存性注入が機能しない

Question

私はちょうどAngular 2の新規インストールをインストールしました。

LoginComponent：

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

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

のApp

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

しかし、私はこのようにログイン componentに TestServiceと呼ばれるサービスを注入しようとすると、

私はエラーが表示されます。私は間違って

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

何をしているのですか？

Answer 1

あなたはElvis Operatorを使用しているはずです。ただtestプロパティがtestに尋ねることを確認する。現在、最初の変更検出が発生すると、test.testはビューのバインディングを評価しようとします。最初はtestが定義されていないため、test.testは失敗します。

{{ test?.test }}