选择器在角度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应用程序的播放位置.

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

指令选择器[myHighlight]将为MyHighlight所有具有类似myHighlight属性的元素创建指令实例,<xxx myHighlight>并MyHighLight在指令中列出where

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

就像其他组件的指令选择器(通常不是AppComponent的根组件)一样,它的作用与指令的选择器相同.该组件必须列在directives数组中.然后,与选择器匹配的所有标记都将升级为Angular组件.

选择器就像CSS选择器.它们可以是属性选择器,标签选择器,类选择器,id选择器以及这些的组合.也:not(...)支持.

不支持的选择器是需要匹配父组件和子组件的选择器,例如组合器,a b或者a > b或者a + bb是另一组件的兄弟,子,descandant等.指令或组件选择器始终只能引用单个元素.

Answer 2

如果我们在简单的术语中说选择器是在我们的视图中使用的名称,如html标签.众所周知,angular2是基于组件的.因此,选择器只提供在其指令列表中由其className调用的组件的名称,并在另一个组件的视图中由选择器名称调用,如下所示:

//假设这是我们的组件

@Component({
 selector : 'mycomponent'
 ....
})
export class Mycomponent{ }

现在我们可以在另一个组件中使用这个组件 -

@Component({
 selector : 'secondcomponent',
 directives: [Mycomponent],  //here we use class name instead of selector name
 template: '<mycomponent></mycomponent>'  //here we used selector name
 ....
})
export class Mycomponent{ }

我们也可以说选择器是一个在视图中用作html标签的完整功能名称.