Question

参考这篇写得很好的quickstart tutorial，我成功地运行了我的第一个有角度的2程序，但很少有问题。请帮我理解。

以下是code snippet，现在我的问题是

1）在 hero.component.ts ;在 @Component 装饰器

中定义 选择器 属性

@Component({
  selector: 'my-hero-detail',
  templateUrl: 'app/hero-detail.component.html',
})

但我们没有在<my-hero-detail>

中定义的相应模板中写templateUrl

和 dashborad.component.ts 相同，我们在选择器中定义了 my-dashboard

@Component({
    selector:'my-dashboard',
    templateUrl: 'app/dashboard.component.html',
    styleUrls: ['app/dashboard.component.css']
})

但没有在相应的模板或任何其他.html页面中写<my-dashboard>。

那么选择器属性的目的/用途是什么？

Answer 1

选择器定义了其他组件如何呈现自定义HTML元素（为了获得更好的描述）。它的这个选择器告诉Angular要渲染哪个组件。在这种情况下，

app/heroes.component.ts (current template)

template:`
  <h1>{{title}}</h1>
  <h2>My Heroes</h2>
  <ul class="heroes">
    <li *ngFor="let hero of heroes"
      [class.selected]="hero === selectedHero"
      (click)="onSelect(hero)">
      <span class="badge">{{hero.id}}</span> {{hero.name}}
    </li>
  </ul>
  <my-hero-detail [hero]="selectedHero"></my-hero-detail>
`,

因此angular将查找具有选择器my-hero-detail的组件并在其位置呈现其模板，因此结果输出将是您的h1，h2，ul和my-hero-detail的内容模板

Answer 2

它只是选择器的名称。我们需要指令的选择器。如果通过检查元素来查看html源代码，则可以在那里找到my-hero-detail。 Angular在进行路由时为您插入元素，而不是在自己的模板中键入它。

选择器属性未在角度2的模板中定义

2 个答案: