angular - 选择器在 Angular 2 中究竟做了什么？

Question

选择器在这种情况下做什么？

import { Component } from '@angular/core';
import { HighlightDirective } from './highlight.directive';

@Component({
  selector: 'my-app',
  templateUrl: 'app/app.component.html',
  directives: [HighlightDirective]
})
export class AppComponent { }

在这种情况下它做了什么？

@Directive({
  selector: '[myHighlight]',
  host: {
    '(mouseenter)': 'onMouseEnter()',
    '(mouseleave)': 'onMouseLeave()'
  }
})

Answer 1

组件应用于 <my-app></my-app>在你的 index.html 中标记.如果你的index.html没有那个标签 Angular 将在启动时失败。您可以控制 Angular 应用程序的播放位置。

这对于使用 bootstrap(AppComponent) 创建的 Angular 组件是特殊的

指令选择器[myHighlight]将创建一个 MyHighlight具有 myHighlight 的所有元素的指令实例类似 <xxx myHighlight> 的属性在哪里MyHighLight列在指令中，例如

@Component({
  selector: '...', 
  directives: [MyHighlight], ...
})
export class Xxx

与其他组件的指令选择器(通常不是 AppComponent 的根组件)一样，它的工作方式与指令的选择器相同。该组件必须列在 directives 中大批。然后所有匹配选择器的标签都升级为 Angular 组件。

选择器类似于 CSS 选择器。它们可以是属性选择器、标签选择器、类选择器、id 选择器以及它们的组合。还有 :not(...)被支持。

不支持的是需要像 a b 这样的组合器来匹配父项和子项的选择器。或 a > b或 a + b其中 b 是另一个组件的同级、子级、descandant 等。指令或组件选择器始终只能引用单个元素。