Ce face mai exact un selector în angular 2? (Programare, Angular)

Sarvesh Yadav a intrebat.

Ce face selectorul în acest caz?

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

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

Și ce face în acest caz?

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

3 răspunsuri
Günter Zöchbauer

Componenta se aplică la <my-app></my-app> din tag-ul dvs. index.html. În cazul în care index.html nu are acea etichetă, Angular va eșua la pornire. Puteți controla unde va fi redată aplicația dvs. Angular.

Acest lucru este special pentru componenta Angular care este creată utilizând bootstrap(AppComponent)

Selectorul de directive [myHighlight] va crea o componentăMyHighlight instanță de directivă pentru toate elementele care au un myHighlight precum <xxx myHighlight> și unde MyHighLight este listat în directive precum

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

La fel ca selectorul de directive pentru alte componente (care nu sunt componente rădăcină, cum este de obicei AppComponent), funcționează la fel ca selectorul de directive. Componenta trebuie să fie listată în directives array. Apoi, toate etichetele care se potrivesc cu selectorul sunt actualizate în componente Angular.

Selectorii sunt ca și selectorii CSS. Ei pot fi selectori de atribute, selectori de tag-uri, selectori de clase, selectori de id-uri și combinații ale acestora. De asemenea, :not(...) este acceptat.

Ceea ce nu este acceptat sunt selectorii care trebuie să se potrivească cu părinte și copil, cum ar fi combinatorii de tipul a b sau a > b sau a + b unde b este un frate, copil, descendent, … al unei alte componente. Un selector de directivă sau de componentă se poate referi întotdeauna doar la un singur element.

Comentarii

  • Mi-am actualizat răspunsul. Doar postați un comentariu dacă explicația nu este suficient de clară. –  > Por Günter Zöchbauer.
Pardeep Jain

Dacă spunem în termeni simpli, selectorul este numele care este utilizat în vizualizarea noastră, cum ar fi tag-ul html. după cum știm cu toții, angular2 se bazează pe componente. astfel încât selectorul este doar să furnizeze numele componentei care este apelată prin className în lista de directive și apelată prin numele selectorului în vizualizarea unei alte componente, astfel: –

//supunem că aceasta este componenta noastră

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

acum putem utiliza această componentă într-o altă componentă, astfel: –

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

De asemenea, putem spune că selectorul este un nume complet de funcționalitate utilizat ca etichetă html în vizualizare.

Comentarii

  • Bună, Pradeep, cum să trimitem date cu acest meta tag, adică <mycomponent></mycomponent> –  > Por MMR.
  • @MMR încercați să utilizați @input și @output –  > Por Pardeep Jain.
  • Da, Pradeep, am folosit @input, dar nu pot să îl accesez decât dacă îl pun în ngOnInit() și nu pot să accesez noua valoare de intrare, deoarece este în Ngoninit. –  > Por MMR.
  • ați declarat valoarea lui @input în partea de sus a constructorului? –  > Por Pardeep Jain.
  • Da, am făcut-o. Dacă aveți nevoie de mai multă claritate, pot crea o nouă întrebare. –  > Por MMR.
Hara Chaitanya

În a doua componentă, exportăm a doua componentă în loc de componenta mea. Corectați-mă dacă am greșit.

Tags: