在 Angular 中，为什么组件装饰器中的选择器称为“css 选择器”？答案

【问题标题】：In Angular, why is the selector in component decorator called the "css selector"?在 Angular 中，为什么组件装饰器中的选择器称为“css 选择器”？
【发布时间】：2021-12-17 16:37:11
【问题描述】：

我来自 HTML CSS Javascript 背景，我刚开始通过他们的官方教程“英雄之旅”学习 Angular。

我注意到官方教程和其他我一直在观看视频的 Youtuber 将组件的选择器称为 CSS 选择器。我不明白为什么这里的术语中包含 CSS。

据我了解，组件的选择器在根/父组件上查找匹配的标签，它是 html 页面中的 html 标签。

无法理解 CSS 是如何成为 CSS 选择器这一术语的

@Component({
  selector: 'app-heroes', //This is what I am referring to.
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.scss', './test.scss']
})

【问题讨论】：

在 CSS 中，选择器定义了样式适用于哪些对象。在 Angular 中，选择器定义了指令/组件适用的对象。语法与 CSS 相同，但 Angular 仅支持其中的一个子集。尽管如此，组件选择器并不需要成为元素选择器。一般来说，它们是 CSS 选择器（有一些限制）。例如，一个指令也可以有一个属性选择器，如"[id]"，匹配所有具有 id 属性的元素。
Ingo 给出答案。

标签： angular

【解决方案1】：

CSS 中的 选择器 定义了如何匹配 DOM 的规则，确定给定样式规则的应用位置/时间。在 Angular 中，指令/组件选择器也使用这些选择器来定义它们适用的元素。组件的元素选择器（如"app-my-component"）是您大部分时间都会看到的，但您不仅限于这些。

例如，您可以编写一个带有"a[href]" 选择器的组件，该选择器匹配任何具有href 属性的a 元素。事实上，您甚至可以使用"[href]" 的选择器，匹配具有此类属性的任何元素。您甚至可以使用 ":not([href])" 之类的选择器将指令应用于任何不具有此类属性的元素。

在实践中，这可能非常有用，尤其是对于指令。事实上，如果你查看 Angular 的 RouterLink 指令的源代码，你会发现它实际上是作为两个独立的指令实现的，一个带有a[routerLink] 的选择器，一个带有:not(a)[routerLink] 的选择器。

【讨论】：

超级有帮助。谢谢！