未識別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" 
}) 

希望幫助