Что именно делает селектор в угловом 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 не имеет этого тега, то при запуске он не сработает. Вы можете контролировать, где будет выполняться угловое приложение.

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

дИРЕКТИВЫ [myHighlight] создаст MyHighlight директиву экземпляра для всех элементов, которые имеют myHighlight атрибут как <xxx myHighlight> и где MyHighLight перечислены в директивах, как

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

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

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

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

Answer 2

Если мы говорим простым термином, это имя, которое используется в нашем представлении подобно тегу html. как мы все знаем, угловой2 является компонентом. поэтому селектор просто указать имя компонента, который в настоящее время называется его 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 тега в представлении.