Angular 2：带有html块的Javascript

我刚开始学习Angular.io提供的Angular 2教程，我无法将教程中的html块（“英雄之旅”，如果您感兴趣）格式化为可读的多行代码，因为javascript将其读取为nextlines（？），并且无法编译代码

但是处理大块的html块是很难理解的

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

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

const HEROES: Hero[] = [
    {id: 1, name:  'Windstorm'},
    {id: 2, name: 'Diana'},
    {id: 3, name: 'Haley'},
    {id: 4, name: 'Halsey'},
    {id: 5, name: 'Sean'},
    {id: 6, name: 'Hunter'},
    {id: 7, name: 'Jay'},
    {id: 8, name: 'Henry'}
  ];

@Component({
  selector: 'app-root',
  template: '<h1>{{title}}</h1> <h2>My Heroes</h2><ul class="heroes"> <li 
  *ngFor="let hero of heroes"><!-- each hero goes here --><span class="badge">
  {{hero.id}}</span> {{hero.name}}</li></ul>'

})

export class AppComponent {
  title = 'Tour of Heroes';
  heroes = HEROES;
  selectedHero: Hero;

  onSelect(hero: Hero): void {
  this.selectedHero = hero;
  }

}

从'@angular/core'导入{Component}；
出口级英雄{
id：编号；
名称：字符串；
}
康斯特英雄：英雄[]=[
{id:1，名称：'Windstorm'}，
{id:2，名字：'Diana'}，
{id:3，名字：'Haley'}，
{id:4，名字：'Halsey'}，
{id:5，名字：'Sean'}，
{id:6，名字：'Hunter'}，
{id:7，名字：'Jay'}，
{id:8，名字：'Henry'}
];
@组成部分({
选择器：'应用程序根'，
模板：{{title}我的英雄

{{hero.id}{{hero.name}
'
})
导出类AppComponent{
标题=‘英雄之旅’；
英雄=英雄；
选择英雄：英雄；
onSelect（英雄：英雄）：无效{
this.selectedHero=英雄；
}
}

在组件中，模板的内容只是一行巨大的代码，在教程中它只会增长

对我来说，除了创建一个html文件并导入每个块之外，还有其他可能性吗？ （为此，我必须绕过局部变量和函数，如ngFor=“…”或hero.id，这样维护代码似乎很乏味

如果这是一个多余的问题，我很乐意删除它。

---

感谢您阅读我的问题

您是在谈论本教程吗？这里的代码示例是“多行”.JS对此不会有任何问题。我刚刚找到了一个解决方案。我可以在每行末尾用一个简单的\来避免javascript中无意的html块。谢谢@OlivierKrulluse backticks``那么你就不必这样做了（这些在教程中使用）。如果您对模板文本感兴趣，请阅读此文。哦，我明白了，我可能应用了错误的代码。def会研究您的建议吗