Что именно делает селектор в angular 2?

Что делает селектор в этом случае?

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

Ответы

Ответ 1

Компонент применяется к тегу <my-app></my-app> в вашем index.html. Если ваш index.html не имеет этого тега Angular, то он не будет запущен при запуске. Вы можете контролировать, где будет выполняться приложение Angular.

Это специальный компонент Angular, созданный с помощью bootstrap(AppComponent)

Селектор директивы [myHighlight] создаст экземпляр директивы MyHighlight для всех элементов, у которых есть атрибут MyHighlight, например <xxx myHighlight>, и где MyHighlight указан в директивах типа

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

Как и селектор директивы для других компонентов (обычно это не такой корневой компонент, как AppComponent), он работает так же, как и селектор для директивы. Компонент должен быть указан в массиве directives. Затем все теги, соответствующие селектору, обновляются до Angular.

Селекторы подобны селекторам CSS. Они могут быть селекторами атрибутов, селекторами тегов, селекторами классов, селекторами идентификаторов и их комбинациями. Также поддерживается :not(...).

То, что не поддерживается, - это селектор, который должен соответствовать родительскому и дочернему типам с комбинаторами типа a b или a > b или a + b, где b является дочерним, дочерним, декандантным,... другого компонента. Селектор директивы или компонента всегда может ссылаться только на один элемент.

Ответ 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 в представлении.