Angular 4“Heroes tutorial”与“templateUrl”和“NgIf”绑定问题

我一直在学习Angular 4教程,终于来到了这里

https://angular.io/tutorial/toh-pt3

我忠实地遵循所有步骤,除了一件事: 我真的不喜欢把HTML写进JS或TS。

@Component({
  selector: 'hero-detail',
  template: `
    <div *ngIf="hero">
      <h2>{{hero.name}} details!</h2>
      <div><label>id: </label>{{hero.id}}</div>
      <div>
        <label>name: </label>
        <input [(ngModel)]="hero.name" placeholder="name"/>
      </div>
    </div>
  `
})

但看起来是这样的:

@Component({
    selector: "hero-detail",
    templateUrl: "./templates/heroes_detail.html",
    styleUrls: ["./css/heroes_detail.css"]
})

<div *ngIf="selectedHero">
    <h2>{{selectedHero.name}} details!</h2>
    <div><label>id: </label>{{selectedHero.id}}</div>
    <div>
        <label>name: </label>
        <input [(ngModel)]="selectedHero.name" placeholder="name"/>
    </div>
</div>

问题

问题是,如果我使用“template”,它会工作,但如果我使用“templateUrl”,它不会!