無法識別TypeScript多行代碼

Question

在Sublime和VS Code中使用Typescript編碼時，請幫助我解決此錯誤。 如果所有template:代碼都在一行中，則它只能被識別並正確顯示在瀏覽器中。

template:'<h1>{{title}}</h1><h2>{{hero.name}} details!</h2><div><label>id: </label>{{hero.id}}</div><div><label>name: </label>{{hero.name}}</div>',

當我嘗試將其分解為服務器行時，瀏覽器無法按預期顯示結果。

以下是我正在執行的完整代碼：

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

export class Hero {
    id: number;
    name: string;
}

@Component({
    selector: 'my-app',
    template:'<h1>{{title}}</h1><h2>{{hero.name}} details!</h2><div><label>id: </label>{{hero.id}}</div><div><label>name: </label>{{hero.name}}</div>',
})

export class AppComponent {
    title = 'Tour of Heroes';
    hero = Hero {
        id: 1;
        name: 'Windstorm';
    }   
}

本教程來自angular.io

Answer 1

編寫多行時需要使用反引號

@Component({
    template: `
        //code here
    `
})

使用帶有大量HTML的模板。

@Component({
    templateUrl: "PATH HERE"
})

希望能有所幫助