@Dyrektywy v/S @ komponent w kątowej

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.