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

【问题标题】：What exactly does a selector do in angular 2?选择器在角度 2 中究竟做了什么？
【发布时间】：2016-05-07 17:39:12
【问题描述】：

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

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()'
  }
})

【问题讨论】：

标签： angular

【解决方案1】：

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

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

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

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

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

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

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

【讨论】：

我更新了我的答案。如果解释不够清楚，请发表评论。

【解决方案2】：

如果我们用简单的术语说选择器是在我们的视图中使用的名称，例如 html 标记。众所周知，angular2 是基于组件的。所以选择器只是提供在指令列表中由其类名调用的组件的名称，并在另一个组件的视图中由选择器名称调用，如下所示：-

//假设这是我们的组件

@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 标记。

【讨论】：

嗨 pradeep，如何使用此元标记发送数据，即
@MMR 尝试使用@input 和@output
你在构造函数的顶部声明了@input的值吗？
是的，如果您需要更清晰的说明，我可以。我可以创建一个新问题。