打字稿似乎不起作用，代码中没有错误但组件不显示

Question

我用 typescript 做了一个小型测试 angular2 应用程序。我没有任何错误，但我生成的 js 文件没有加载。这是我的代码；

在 default.aspx 页面我有我的选择器：

 <asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
 <app-main>Loading...</app-main>
 </asp:Content>

boot.ts

import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent)

app.component.ts

import {Welcome} from './app.module'
import {Component} from 'angular2/core'
@Component({
selector: 'app-main',
template: `<h1>${Welcome.GetWelcome()}</h1>`
}) export class AppComponent { }

app.module.ts

export class Welcome {
static GetWelcome(): string {
    return "Hello World";
}
}

tsconfig.json

{
"compileOnSave": true,
"compilerOptions": {
"watch":  true,
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "ES5",
"module": "system",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true
 },
 "exclude": [
 "./node_modules",
 "./typings/main",
 "./typings/main.d.ts"
 ]
 }

代码正在编译，但欢迎消息未加载到 app-main 中。我在这里做错了什么？我正在使用 Visual Studio 2015，版本 14.0

Answer 1

我为你做了一个 plunkr http://plnkr.co/edit/oMOvCgFzqtnYYPcE2U6j?p=preview

正如@toskv 所建议的那样，绑定字符串并不能正常工作。您将字符串定义为组件中的字段。并将其与模板中的双 {{msg}} 标签一起使用。这是简短的版本：

@Component({
selector: 'app-main',
template: `<h1>{{msg}}</h1>`
}) 
export class AppComponent {
  msg = Welcome.GetWelcome();      
}