TypeScript - @Directive vs @Component Angularissa

Mikä on ero @Component- ja @Directive-annotaatioiden välillä Angularissa? Molemmat vaikuttavat tekevän saman tehtävän ja niillä on samat attribuutit.

Mitkä ovat käyttötapaukset ja milloin kannattaa suosia toista toisen sijaan?

Vastaus #1

@Component tarvitsee näkymän, kun taas @Directive ei.

Direktiivit

Vertaan @Directivea Angular 1.0 -direktiiviin, jossa on vaihtoehto restrict: 'A' (Direktiivit eivät rajoitu pelkkään attribuuttien käyttöön.) Direktiivit lisäävät käyttäytymistä olemassa olevaan DOM-elementtiin tai olemassa olevaan komponentti-instanssiin. Yksi esimerkki direktiivin käyttötapauksesta olisi klikkauksen kirjaaminen elementissä.

import {Directive} from '@angular/core';

@Directive({
    selector: "[logOnClick]",
    hostListeners: {
        'click': 'onClick()',
    },
})
class LogOnClick {
    constructor() {}
    onClick() { console.log('Element clicked!'); }
}

Jota käytettäisiin näin:

<button logOnClick>I log when clicked!</button>

Komponentit

Komponentti sen sijaan, että lisäisi/muokkaisi käyttäytymistä, luo itse oman näkymänsä (DOM-elementtien hierarkian) liitetyllä käyttäytymisellä. Esimerkki tällaisen komponentin käytöstä voisi olla yhteystietokortti-komponentti:

import {Component, View} from '@angular/core';

@Component({
  selector: 'contact-card',
  template: `
    <div>
      <h1>{{name}}</h1>
      <p>{{city}}</p>
    </div>
  `
})
class ContactCard {
  @Input() name: string
  @Input() city: string
  constructor() {}
}

Jota käytettäisiin näin:

<contact-card [name]="'foo'" [city]="'bar'"></contact-card>

ContactCard on uudelleenkäytettävä käyttöliittymäkomponentti, jota voimme käyttää missä tahansa sovelluksessamme, jopa muiden komponenttien sisällä. Nämä muodostavat käytännössä sovellustemme käyttöliittymän rakennuspalikat.

Yhteenvetona

Kirjoita komponentti, kun haluat luoda uudelleenkäytettävän joukon DOM-elementtejä käyttöliittymää varten mukautetulla käyttäytymisellä. Kirjoita direktiivi, kun haluat kirjoittaa uudelleenkäytettävää käyttäytymistä olemassa olevien DOM-elementtien täydentämiseksi.

Lähteet :

  • @Ohjeistus dokumentaatio
  • @Component-dokumentaatio
  • Hyödyllinen blogikirjoitus

Vastaus #2

Komponentit

  1. Komponentin rekisteröimiseksi käytämme @Component-metatiedon merkintää.
  2. Komponentti on direktiivi, joka käyttää varjodomia (shadow DOM) luodakseen kapseloitua visuaalista toimintaa, jota kutsutaan komponenteiksi. Komponentteja käytetään tyypillisesti käyttöliittymän (UI) widgettien luomiseen.
  3. Komponenttia käytetään hajottamaan sovellus pienemmiksi komponenteiksi.
  4. Vain yksi komponentti voi olla läsnä yhtä DOM-elementtiä kohden.
  5. Komponentissa @View-koristelija tai templateurl-malli on pakollinen.

Direktiivi

  1. Direktiivien rekisteröimiseksi käytämme @Directive-metatiedon merkintää.
  2. Direktiiviä käytetään lisäämään käyttäytymistä olemassa olevaan DOM-elementtiin.
  3. Direktiiviä käytetään uudelleenkäytettävien komponenttien suunnitteluun.
  4. Monia direktiivejä voidaan käyttää yhtä DOM-elementtiä kohden.
  5. Direktiivi ei käytä View'ta.

Lähteet :

https://www.devdiscuss.com/difference-between-component-and-directive-in-angular-2/

Vastaus #3

Komponentti on direktiivi, jolla on malli, ja @Component-koristaja on itse asiassa @Directive-koristajan laajennus, jossa on malliin liittyviä ominaisuuksia.

Vastaus #4

Angular 2:ssa ja sitä uudemmissa "kaikki on komponentti." Komponentit ovat pääasiallinen tapa, jolla rakennamme ja määrittelemme elementtejä ja logiikkaa sivulla, sekä mukautettujen elementtien että ominaisuuksien kautta, jotka lisäävät toiminnallisuutta olemassa oleviin komponentteihimme.

http://learnangular2.com/components/

Mutta mitä direktiivit sitten tekevät Angular2+:ssa?

Attribuuttidirektiivit liittävät käyttäytymisen elementteihin.

Angularissa on kolmea tyyppiä direktiivejä:

  1. Komponentit—direktiivit, joilla on malli.
  2. Rakenteelliset direktiivit—muuttavat DOM-rakennetta lisäämällä ja poistamalla DOM-elementtejä.
  3. Attribuuttidirektiivit—muuttavat elementin, komponentin tai toisen direktiivin ulkoasua tai käyttäytymistä.

https://angular.io/docs/ts/latest/guide/attribute-directives.html

Joten mitä tapahtuu Angular2:ssa ja sitä uudemmissa versioissa, on se, että direktiivit ovat attribuutteja, jotka lisäävät toimintoja elementteihin ja komponentteihin.

Katso alla olevaa esimerkkiä Angular.io-sivustolta:

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

Joten mitä se tekee, se laajentaa komponenttejasi ja HTML-elementtejäsi lisäämällä keltaisen taustan, ja voit käyttää sitä seuraavasti:

<p myHighlight>Highlight me!</p>

Mutta komponentit luovat täysiä elementtejä kaikilla toiminnoilla kuten alla:

import { Component } from '@angular/core';

@Component({
  selector: 'my-component',
  template: `
    <div>Hello my name is {{name}}. 
      <button (click)="sayMyName()">Say my name</button>
    </div>
   `
})
export class MyComponent {
  name: string;
  constructor() {
    this.name = 'Alireza'
  }
  sayMyName() {
    console.log('My name is', this.name)
  }
}

ja voit käyttää sitä alla olevan mukaisesti:

<my-component></my-component>

Kun käytämme tagia HTML:ssä, tämä komponentti luodaan, konstruktori kutsutaan ja se renderöidään.

Vastaus #5

@Component on vain @Directive-aliluokka. Ennen kuin sukelletaan syvälle tähän, meidän täytyy ymmärtää, mikä on @Directive...

@Directive on koristelija, jota käytetään ohjaamaan DOM:ia joko lisäämään uusi elementti tai poistamaan tai muokkaamaan olemassa olevaa elementtiä. Joten aina, kun Angular kohtaa minkä tahansa koristelijan, se käsittelee sen ajon aikana ja muokkaa DOM:ia sen mukaisesti.

Voimme luoda Directivesimme käyttämällä @Directive kuten alla on esitetty

@Directive({
  selector: '[demoButtonColor]'
})
export class DemoButtonColorDirective {
  constructor(private elementRef: ElementRef) { };
  ngOnInit() {
    this.elementRef.nativeElement.style.backgroundColor = 'red';
  }
}

Käyttö HTML:ssä

<button demoButtonColor>RED BUTTON</button>

Nyt katsotaan, mitä @Component-dekoraattori on

@Component on @Directive-luokan aliluokka, jossa on yksi lisätoiminto. @Componentin avulla voimme luoda HTML-mallimme, joka voidaan lisätä DOM:iin ajon aikana.

@Component({
  selector: 'demo-color',
  template: '<h1>Hello There!</h1>'
})
class DemoColorComponent {}

Voimme käyttää sitä uudelleen missä tahansa muussa komponentissa, kuten alla on esitetty

<div>
  <demo-color></demo-color>
</div>

Yhteenvetona, käytä @Directive luodaksesi mukautetun direktiivin, jota voidaan käyttää elementin tai DOM-rakenteen muokkaamiseen. Ja käytä @Component, jos haluat luoda uudelleenkäytettäviä käyttöliittymäkomponentteja mukautetulla käyttäytymisellä.

Vastaus #6

Ohjelmointikontekstissa direktiivit tarjoavat ohjeita kääntäjälle muuttaakseen tapaa, jolla se muuten käsittelisi syötteen, eli muuttaa tiettyä käyttäytymistä.

“Direktiivit antavat sinun liittää käyttäytymistä DOM-elementteihin.”

direktiivit jaetaan kolmeen kategoriaan:

  • Attribuutti
  • Rakenteellinen
  • Komponentti

Kyllä, Angular 2:ssa komponentit ovat eräänlainen direktiivi. Dokkien mukaan,

„Angular-komponentit ovat direktiivien alajoukko. Toisin kuin direktiiveillä, komponenteilla on aina mallipohja ja vain yksi komponentti voidaan luoda per elementti mallipohjassa.”

Angular 2 -komponentit ovat Web Component -konseptin toteutus. Web Components koostuvat useista erillisistä teknologioista. Voit ajatella Web Components -komponentteja uudelleenkäytettävinä käyttöliittymäwidgeteinä, jotka on luotu avoimilla verkkoteknologioilla.

  • Joten tiivistetysti direktiivit: Mekanismi, jonka avulla liitämme käyttäytymisen elementteihin DOM:ssa, jaetaan rakenteellisiin, attribuuttityyppeihin ja komponenttityyppeihin.
  • Komponentit ovat tietyn tyyppisiä direktiivejä, jotka sallivat meidän hyödyntää verkkokomponenttien toiminnallisuutta, eli uudelleenkäytettävyyttä - kapseloituja, uudelleenkäytettäviä elementtejä, jotka ovat saatavilla koko sovelluksessamme.

Vastaus #7

Komponentit

Komponentit ovat Angular-sovelluksen perus UI-rakennuspalikoita. Angular-sovellus sisältää puun Angular-komponentteja. Sovelluksemme Angularissa on rakennettu komponenttipuun varaan. Jokaisella komponentilla tulisi olla oma mallinsa, tyylinsä, elinkaari, valitsin jne. Joten jokaisella komponentilla on oma rakenteensa. Voit pitää niitä erillisinä, itsenäisinä pieniä verkkosovelluksia, joilla on oma malli ja logiikka sekä mahdollisuus kommunikoida ja toimia yhdessä muiden komponenttien kanssa.

Esimerkin .ts-tiedosto komponentille:

import { Component } from '@angular/core';

@Component({
    // component attributes
    selector: 'app-training',
    templateUrl: './app-training.component.html',
    styleUrls: ['./app-training.component.less']
})

export class AppTrainingComponent {
    title = 'my-app-training';
}

ja sen ./app.component.html mallinäkymä:

Hello {{title}}

Sitten voit renderöidä AppTrainingComponent-mallin sen logiikan kanssa muissa komponenteissa (sen lisäämisen jälkeen moduuliin)

<div>
   <app-training></app-training>
</div>

ja tulos tulee olemaan

<div>
   my-app-training
</div>

kun AppTrainingComponent renderöitiin täällä

Katso lisää komponenteista

Direktiivit

Direktiivi muuttaa olemassa olevan DOM-elementin ulkonäköä tai käyttäytymistä. Esimerkiksi [ngStyle] on direktiivi. Direktiivit voivat laajentaa komponentteja (voivat olla niiden sisällä käytössä), mutta ne eivät rakenna koko sovellusta. Sanotaan vaikka, että ne vain tukevat komponentteja. Niillä ei ole omaa mallipohjaa (mutta tietysti voit manipuloida mallipohjaa niiden avulla).

Esimerkkiohje:

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private el: ElementRef) { }

  @Input('appHighlight') highlightColor: string;

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.highlightColor || 'red');
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

Ja sen käyttö:

<p [appHighlight]="color" [otherPar]="someValue">Highlight me!</p>

Katso lisää ohjeista

Aiheeseen liittyviä artikkeleita