无法识别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"
})

希望能有所帮助