Question

在Angular教程https://angular.io/tutorial/toh-pt1#selector中，我不理解这句话：＆＃34; CSS元素选择器＆＃39; app-heroes＆＃39;匹配标识此组件的HTML元素的名称在父组件的模板中。＆＃34; 我不知道css选择器是什么样的，因为我找不到任何与某个HTML元素的名称相匹配的东西..没有名称app-heroes或类似的HTML元素...... 这是如何工作的？

我只有一个文件夹结构/ src / app / heroes，其中我的英雄组件已定义。它是否构成一个由＆＃34; parentfolder-folder＆＃34;组成的名称？什么将由css元素选择器引用？

Answer 1

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

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

因此，您的CSS选择器app-heroes与此HTML节点<app-heroes></app-heroes>匹配。与CSS选择器h1{}相同，与<h1></h1>匹配

Answer 2

我不明白这句话：＆＃34; CSS元素选择器，＆＃39; app-heroes＆＃39;匹配标识的HTML元素的名称父组件模板中的此组件。＆＃34;

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

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

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

2 个答案: