Que fait exactement un sélecteur en angulaire 2?

Question

Que fait le sélecteur dans ce cas?

 import { Component } from '@angular/core';
import { HighlightDirective } from './highlight.directive';

@Component({
  selector: 'my-app',
  templateUrl: 'app/app.component.html',
  directives: [HighlightDirective]
})
export class AppComponent { }
 

Et que fait-il dans ce cas?

 @Directive({
  selector: '[myHighlight]',
  host: {
    '(mouseenter)': 'onMouseEnter()',
    '(mouseleave)': 'onMouseLeave()'
  }
})
 

Answer 1

Le composant est appliqué à l' <my-app></my-app> balise dans votre index.html. Si votre index.html n'ont pas de balise Angulaire échoue au démarrage. Vous pouvez contrôler où vous Angulaire de l'application sera joué.

C'est spécial pour l'angle d'composant qui est créé à l'aide d' bootstrap(AppComponent)

La directive sélecteur [myHighlight] permettra de créer unMyHighlight directive exemple pour tous les éléments qui ont un myHighlight attribut comme <xxx myHighlight> et où l' MyHighLight est listé dans les directives telles que

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

Comme la directive sélecteur pour d'autres composants (qui ne sont pas le composant racine comme AppComponent est souvent le cas), il fonctionne de la même comme le sélecteur de la directive. Le composant doit être répertoriée dans l' directives tableau. Ensuite, toutes les balises qui correspondent au sélecteur sont mis à niveau vers des composants Angulaires.

Les sélecteurs sont comme des sélecteurs CSS. Ils peuvent être sélecteur d'attribut, des sélecteurs de balise, des sélecteurs de classe, sélecteurs d'id et de combinaisons de ceux-ci. Aussi :not(...) est pris en charge.

Ce n'est pas pris en charge sont les sélecteurs qui doit correspondre parent et de l'enfant comme avec les combinators comme a b ou a > b ou a + b où b est un frère ou une sœur, un enfant, un descandant, ... d'un autre composant. Une directive ou d'un composant sélecteur peut toujours faire référence uniquement à un seul élément.

Answer 2

Si nous disons en terme simple sélecteur est un nom qui est utilisé dans notre point de vue comme une balise html. comme nous le savons tous angular2 est à base de composants. si le sélecteur est, il suffit de fournir le nom de la composante, qui est appelé par son nom de classe dans la liste des directives et appelé par le nom du sélecteur dans la vue de l'autre composant comme ceci:-

//suppose que c'est notre composant

@Component({
 selector : 'mycomponent'
 ....
})
export class Mycomponent{ }

maintenant, nous pouvons utiliser ce composant dans un autre composant comme celui - ci

@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{ }

Aussi, nous pouvons dire que le sélecteur est une fonctionnalité complète nom utilisé comme balise html dans la vue.