Angular Heroes 教程 <app-heroes> css 选择器答案

【问题标题】：Angular Heroes tutorial <app-heroes> css selectorAngular Heroes 教程 <app-heroes> css 选择器
【发布时间】：2018-10-28 15:52:44
【问题描述】：

在 Angular 教程 https://angular.io/tutorial/toh-pt1#selector 中，我不明白这句话：“CSS 元素选择器，‘app-heroes’，匹配在父组件的模板中标识该组件的 HTML 元素的名称。” 我不知道 CSS 选择器是什么样的，因为我找不到任何与某些 HTML 元素的名称匹配的东西。没有名为 app-heroes 或类似名称的 HTML 元素... 这是如何工作的？

我只有一个文件夹结构 /src/app/heroes，其中定义了我的英雄组件。它是否构造了一个由“parentfolder-folder”组成的名称？ css元素选择器究竟会引用什么？

【问题讨论】：

标签： html css angular

【解决方案1】：

我不明白这句话：“CSS 元素选择器， 'app-heroes'，匹配标识的 HTML 元素的名称此组件位于父组件的模板中。”

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

正如您在@Component 中看到的，它使用值app-heroes 定义了selector，这意味着您将使用app-heroes 来像html 元素（例如<div> </div>，因此您将使用<app-heroes></app-heroes> ) 以便能够显示 HeroesComponent 的视图。

【讨论】：

【解决方案2】：

向下滚动到显示Show the HeroesComponent view 的位置。在那里你会看到 HTML：

<h1>{{title}}</h1>
<app-heroes></app-heroes>

所以你的 CSS 选择器 app-heroes 匹配这个 HTML 节点 <app-heroes></app-heroes>。与 CSS 选择器相同 h1{} 匹配 <h1></h1>

【讨论】：

非常感谢，这基本上意味着，我的“模板”或更确切地说是引用的选择器将被绑定到另一个 html 文档中？哪个部分被替换？将我的 hero.component.ts 的整个代码放在那个位置还是只将我的 heros.component.html 文件添加到那个位置？
@user2883596 AppHeroes 组件的所有代码都将作为app-heroes的子组件放置