¿Qué hace exactamente un selector en angular 2?

¿Qué hace el selector en este caso?

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

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

Y qué hace en este caso?

@Directive({
  selector: '[myHighlight]',
  host: {
    '(mouseenter)': 'onMouseEnter()',
    '(mouseleave)': 'onMouseLeave()'
  }
})
 27
angular
Author: Community, 2016-05-07
Source

2 answers

El componente se aplica a la etiqueta <my-app></my-app> en su index.html. Si su index.html no tiene esa etiqueta Angular fallará al iniciar. Puede controlar dónde se reproducirá la aplicación Angular.

Esto es especial para el componente Angular que se crea usando bootstrap(AppComponent)

El selector de directiva [myHighlight] creará una instancia de directivaMyHighlight para todos los elementos que tengan un atributo myHighlight como <xxx myHighlight> y donde MyHighLight esté listado en directivas como

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

Como la directiva selector para otros componentes (que no son el componente raíz como suele ser AppComponent), funciona igual que el selector para la directiva. El componente tiene que ser listado en el array directives. Luego, todas las etiquetas que coinciden con el selector se actualizan a componentes Angulares.

Los selectores son como los selectores CSS. Pueden ser selectores de atributos, selectores de etiquetas, selectores de clases, selectores de id y combinaciones de estos. También se admite :not(...).

Lo que no se admite son selectores que necesitan emparejar padre e hijo con combinadores como a b o a > b o a + b donde b es un hermano, hijo, descandante, ... de otro componente. Un selector de directiva o componente siempre puede referirse a un solo elemento.

 19
Author: Günter Zöchbauer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-07 18:17:16

Si decimos en selector de término simple es nombre que se utiliza en nuestra vista como etiqueta html. como todos sabemos angular2 está basado en componentes. así que selector es simplemente proporcionar el nombre del componente que está siendo llamado por su className en la lista de directivas y llamado por selector name en la vista de otro componente como este: -

/ / supongamos que este es nuestro componente

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

Ahora podemos usar este componente en otro componente como este - 

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

También podemos decir selector es un nombre completo de funcionalidad utilizado como etiqueta html en la vista.

 11
Author: Pardeep Jain,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-07 18:19:08