Что делает селектор в этом случае?
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.
Это специальный компонент 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 является дочерним, дочерним, декандантным,... другого компонента. Селектор директивы или компонента всегда может ссылаться только на один элемент.
Если мы говорим простым языком, селектор - это имя, которое используется в нашем представлении подобно тегу 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 в представлении.