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 ...'; 
}