在这种情况下,选择器会做什么？
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()'
}
})
该组件已应用于< 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通常那样是根组件)一样,它的作用与指令的选择器相同.该组件必须列在指令数组中.然后,与选择器匹配的所有标签都将升级为Angular组件.
选择器就像CSS选择器.它们可以是属性选择器,标签选择器,类选择器,id选择器以及这些的组合.另外：不支持(…).
不支持的选择器是需要匹配父和子的选择器,如b或a等组合器. b或b其中b是另一个组成部分的兄弟姐妹,孩子,descandant ……指令或组件选择器始终只能引用单个元素.
