Angular2：Interpolation not rendering

Question

我正在關注Angular 2的速成課程。 我安裝了節點v7.10.0和npm 4.2.0。從根app.component.ts一個「世界你好」程序開始，我創建了一個簡單的自定義組件test.component.ts：

import { Component } from 'angular2/core' 

@Component({ 
     selector: 'test', 
     template: `<h2>{{ title }}</h2>` 
}) 

export class TestComponent { 
     title: "Just testing ..."; 
} 

我導入和參考TestComponent在應用程序的根組件（app.component.ts）：

import {Component} from 'angular2/core'; 
import {TestComponent} from './test.component'; 

@Component({ 
    selector: 'my-app', 
    template: '<h1>Hello Angular 2</h1><test></test>', 
    directives: [TestComponent] 
}) 
export class AppComponent { } 

它只是呈現「你好角2」在瀏覽器中，而不是「只是測試......」字符串。

我在想這個問題可能在模板中（反引號或類似的），但我看不出我做錯了什麼。 控制檯吐了幾個廢棄警告，但似乎並不涉及到我的渲染問題：

angular2-polyfills.js:1152 DEPRECATION WARNING: 'enqueueTask' is no longer supported and will be removed in next major release. Use addTask/addRepeatingTask/addMicroTask 
angular2.dev.js:353 Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode. 
angular2-polyfills.js:1152 DEPRECATION WARNING: 'dequeueTask' is no longer supported and will be removed in next major release. Use removeTask/removeRepeatingTask/removeMicroTask 

Answer 1

這是角4.0.0

app.module.ts解決

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { TestComponent } from './test.component'; 

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

app.component.ts

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

@Component({ 
    selector: 'my-app', 
    template: `<h1>Hello Angular 2</h1><test></test>` 
}) 
export class AppComponent {} 

個

test.component.ts

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

@Component({ 
    selector: 'test', 
    template: `<h2>{{ title }}</h2>` 
}) 

export class TestComponent { 
    title = 'Just testing ...'; 
}