Question

我一直在关注Angular 4教程，我来到这里

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

我忠实地遵循了所有步骤，除了一件事：我真的不喜欢将HTML写入JS或TS。

所以我的“Hero Detail”组件应如下所示：

@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"]
})

当然我创建了匹配的HTML

<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>

问题

问题是，如果我使用“模板”它可以工作，但如果我使用“templateUrl”它不会！

是否存在类似Angular1和范围和ngIf的问题？

Answer 1

您在html文件中将hero变量更改为selectedHero。也可以在组件.ts文件中更改它。

Answer 2

这是问题

<hero-detail [hero]="selectedHero"></hero-detail>

这使得＆＃34; selectedHero＆＃34;在＆＃34;英雄＆＃34;。因此，在HTML中，我必须使用hero而不是selectedHero

希望这会有所帮助

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

2 个答案: