@Input（）が動作していない - 2

Question

角度私Angular2アプリでTabTitleComponentと呼ばれるコンポーネントがあります。

 import { Component, OnInit,Input,AfterViewInit } from '@angular/core'; 

     @Component({ 
     selector: 'tab-title', 
     templateUrl: './tab-title.component.html', 
     styleUrls: ['./tab-title.component.css'] 
     }) 
     export class TabTitleComponent implements OnInit,AfterViewInit { 

     @Input() title; 

     ngOnInit() 
     { 
      console.log('ngOnInit'+this.title); 
     } 
     ngAfterViewInit() 
     { 
      console.log('ngAfterViewInit',this.title); 
     } 

     } 

私はAppComponentにこのコンポーネントを使用しています。

私はHTMLでTabTitleComponent（AppComponentのテンプレート）を使用して問題1は、次のように私はtitle値を取得しておりません。コンソールでは、undefinedをログに記録されます。

<div> 
    <tab-title [title]='88'> </tab-title>  
</div> 

私はそれを次のように置き換えると、コンソールに88が表示されます。

<tab-title [title]='88'> </tab-title> 

私はstringタイプのtitleを作り、私はundefinedを取得していますどちらの場合も、値を渡す問題2。

私は、根本的な原因を見つけることができないのです。誰かが問題を見つけるのを助けることができますか？

Answer 1

"88" でたぶん理由 このコードを試してみてください。

<tab-title [title]="'88'"> </tab-title> 

Answer 2

//our root app component 
import {Component, Input, NgModule, VERSION} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 


@Component({ 
    selector: 'tab-title', 
    template: '<div>{{title}}</div>' 
}) 
export class TabTitleComponent implements OnInit,AfterViewInit { 

    @Input() title : string; 

    ngOnInit() 
    { 
    console.log('ngOnInit'+this.title); 
    } 
    ngAfterViewInit() 
    { 
    console.log('ngAfterViewInit',this.title); 
    } 

} 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
    <tab-title [title]="'88'"> </tab-title>  
    </div> 
    `, 
}) 
export class App { 

} 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App, TabTitleComponent ], 
    bootstrap: [ App ] 
}) 
export class AppModule {}