当选择器包含在HTML标记中时@Input（）不工作 - Angular 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中使用此组件。

问题1

当我使用HTML TabTitleComponent（AppComponent的模板）如下然后，我没有得到title值。在控制台中，它正在记录undefined。

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

当我用下面的代替它然后我在控制台中得到88。

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

问题2

当我做string型title，然后传递价值在两种情况下我得到undefined。

我无法找到根本原因。有人能帮我找出问题吗？

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 {}