@ Directive vs @ Component in Angular

Komponenty

1. do rejestracji komponentu używamy adnotacji metadanych @Component.
2. komponent jest dyrektywą, która używa Shadow DOM do tworzenia zamkniętego zachowania wizualnego zwanego komponentami. Komponenty są zwykle używane do tworzenia widżetów interfejsu użytkownika.
3. komponent służy do podziału aplikacji na mniejsze komponenty.
4. tylko jeden komponent może być obecny na elemencie DOM.
5. @View dekorator lub szablon są obowiązkowe w komponent.

Dyrektywa

1. do rejestracji dyrektyw używamy adnotacji metadanych @Directive.
2. dyrektywa jest używana do dodania zachowania do istniejącego elementu DOM.
3. Dyrektywa służy do projektowania elementów wielokrotnego użytku.
4. można użyć wielu dyrektyw dla każdego elementu DOM.
5. dyrektywa nie używa widoku.

Źródła:

Http://www.codeandyou.com/2016/01/difference-between-component-and-directive-in-Angular2.html

Komponent jest dyrektywą-z-szablonem, a @Component dekoratorem jest w rzeczywistości dekoratorem @Directive rozszerzonym o funkcje zorientowane na szablon.

W Angular 2 i wyżej, " wszystko jest składnikiem."Komponenty są głównym sposobem budowania i określania elementów i logiki na stronie, poprzez zarówno elementy niestandardowe, jak i atrybuty, które dodają funkcjonalności do nasze istniejące komponenty.

Http://learnangular2.com/components/

Ale co wtedy robią dyrektywy w Angular2+ ?

Dyrektywy atrybutów dołączają zachowanie do elementów.

Istnieją trzy rodzaje dyrektyw w Kątowe:

1. Komponenty-dyrektywy z szablonem.
2. dyrektywy strukturalne-zmiana układ DOM poprzez dodawanie i usuwanie elementów DOM.
3. dyrektywy atrybutów-zmieniają wygląd lub zachowanie elementu, komponentu lub innej dyrektywy.

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

Czyli to co dzieje się w Angular2 i wyżej to dyrektywy {[34] } są atrybutami, które dodają funkcje do elementów i elementów.

Spójrz na poniższą próbkę z Angular.io:

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

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

Więc co to robi, rozszerzy ci komponenty i elementy HTML z dodaniem żółtego tła i możesz go użyć jak poniżej:

<p myHighlight>Highlight me!</p>

Ale komponenty będą tworzyć pełne elementy ze wszystkimi funkcjonalnościami jak poniżej:

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)
  }
}

I możesz go użyć jak poniżej:

<my-component></my-component>

Gdy użyjemy znacznika w HTML, komponent ten zostanie utworzony i konstruktor zostanie wywołany i wyrenderowany.

Wykrywanie zmian

Tylko @Component może być węzłem w drzewie wykrywania zmian. Oznacza to, że nie można ustawić ChangeDetectionStrategy.OnPush w @Directive. Pomimo tego, dyrektywa może mieć właściwości @Input i @Output i można z niej wstrzykiwać i manipulować komponentem hosta ChangeDetectorRef. Używaj komponentów, gdy potrzebujesz szczegółowej kontroli nad drzewem wykrywania zmian.

W kontekście programowania dyrektywy dostarczają wskazówek dla kompilatora, aby zmienić sposób przetwarzania danych wejściowych, tzn. zmienić pewne zachowanie.

"dyrektywy pozwalają na dołączanie zachowania do elementów w DOM."

Dyrektywy dzielą się na 3 kategorie:

• atrybut
• strukturalne
• komponent

Tak, w Angular 2 komponenty są rodzajem dyrektywy. Według Doc,

"kątowe komponenty są podzbiorem dyrektyw. W przeciwieństwie do dyrektyw, komponenty zawsze mają szablon i tylko jeden komponent może być utworzony dla elementu w szablonie."

Angular 2 Components są implementacją koncepcji Web Component . Web Components składa się z kilku odrębnych technologii. Komponenty WWW można traktować jako widżety interfejsu użytkownika wielokrotnego użytku, które są tworzone przy użyciu technologii Open Web.

• więc w skrócie, mechanizm przez które dołączamy {[24] } do elementów w DOM, składających się ze strukturalnego, Typy atrybutów i komponentów.
• komponenty są szczególnym rodzajem dyrektywy, która pozwala nam wykorzystanie funkcjonalności web component AKA reusability - hermetyzowane elementy wielokrotnego użytku Dostępne w całej naszej aplikacji.

Komponenty

Komponenty to najbardziej podstawowy element interfejsu użytkownika aplikacji Angular. Aplikacja kątowa zawiera drzewo elementów kątowych. Nasza aplikacja w Angular jest zbudowana na drzewie komponentów . Każdy komponent powinien mieć swój szablon, stylizację, cykl życia, selektor itp. więc każdy komponent ma swoją strukturę można traktować je jako samodzielną małą aplikację internetową z własnym szablonem i logiką oraz możliwością komunikacji i wykorzystania wraz z innymi komponentami.

Próbka .plik ts dla komponentu:

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';
}

I jego ./ app.komponent.widok szablonu html:

Hello {{title}}

Następnie możesz renderować szablon Aptrainingcomponent z jego logiką w innych komponentach (po dodaniu go do modułu)

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

I wynik będzie

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

Jako apptrainingcomponent został renderowany tutaj

Zobacz więcej o komponentach

Dyrektywy

Dyrektywa zmienia wygląd lub zachowanie istniejącego elementu DOM. Na przykład [ngStyle] jest dyrektywą. Dyrektywy mogą rozszerzać komponenty (mogą być używane wewnątrz nich), ale nie budują całej aplikacji. Powiedzmy, że obsługują tylko komponenty. nie mają własnego szablonu (ale oczywiście można nimi manipulować szablonem).

Przykładowa dyrektywa:

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

I jego użycie:

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

Zobacz więcej o dyrektywach

Jeśli odwołasz się do oficjalnych dokumentów angular

https://angular.io/guide/attribute-directives

Istnieją trzy rodzaje dyrektyw w języku Angular:

1. Komponenty-dyrektywy z szablonem.
2. dyrektywy strukturalne-zmiana układu DOM poprzez dodawanie i usuwanie elementów DOM. e .g * ngIf
3. dyrektywy atrybutów-zmieniają wygląd lub zachowanie elementu, komponentu lub innej dyrektywy. np [ngClass].

W miarę rozwoju aplikacji napotykamy trudności w utrzymaniu wszystkich tych kodów. Na cel reusability, oddzielamy naszą logikę w komponentach smart i dumb i używamy dyrektyw (strukturalnych lub atrybutów) do wprowadzania zmian w DOM.