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，...另一个组成部分。指令或组件选择器始终只能引用单个元素。

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标签的完整功能名称。

Answer 3

在第二个组件中，我们导出第二个组件而不是“我的”组件。如果我错了请纠正我。

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

3 个答案: