选择器在角度2中究竟做了什么？

发布时间：2020-12-17 07:54:29 所属栏目：安全来源：网络整理

导读：在这种情况下,选择器会做什么？ import { Component } from '@angular/core';import { HighlightDirective } from './highlight.directive';@Component({ selector: 'my-app',templateUrl: 'app/app.component.html',directives: [HighlightDirective]})expo

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

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 ……指令或组件选择器始终只能引用单个元素.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!