@Directive vs @Component in Angular

Jaka jest różnica między @Componenti @Directivew Angular? Oba wydają się wykonywać to samo zadanie i mają te same atrybuty.

Jakie są przypadki użycia i kiedy preferować jeden od drugiego?

@Component wymaga widoku, podczas gdy @Directive nie.

Dyrektywy

Porównuję @Directive do dyrektywy Angular 1.0 z opcjąrestrict: 'A' (Dyrektywy nie ograniczają się do użycia atrybutów). Dyrektywy dodają zachowanie do istniejącego elementu DOM lub istniejącej instancji komponentu. Jednym z przykładów zastosowania dyrektywy byłoby zarejestrowanie kliknięcia elementu.

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

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

Który byłby użyty w ten sposób:

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

składniki

Składnik, zamiast dodawać / modyfikować zachowanie, tak naprawdę tworzy własny widok (hierarchia elementów DOM) z dołączonym zachowaniem. Przykładem tego może być element karty kontaktowej:

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

Który byłby użyty w ten sposób:

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

ContactCardto komponent interfejsu użytkownika wielokrotnego użytku, którego moglibyśmy użyć w dowolnym miejscu naszej aplikacji, nawet w innych komponentach. Zasadniczo stanowią one elementy składowe interfejsu użytkownika naszych aplikacji.

W podsumowaniu

Napisz komponent, jeśli chcesz utworzyć zestaw elementów DOM interfejsu wielokrotnego użytku z niestandardowym zachowaniem. Napisz dyrektywę, gdy chcesz zapisać zachowanie wielokrotnego użytku, aby uzupełnić istniejące elementy DOM.

Źródła:

• @Directive dokumentacja
• Dokumentacja @Component
• Pomocny post na blogu

składniki

1. Aby zarejestrować komponent, używamy @Componentadnotacji metadanych.
2. Komponent to dyrektywa, która wykorzystuje cień DOM do tworzenia zachowań zamkniętych zwanych komponentami. Komponenty są zwykle używane do tworzenia widgetów interfejsu użytkownika.
3. Komponent służy do podziału aplikacji na mniejsze komponenty.
4. Na element DOM może być obecny tylko jeden składnik.
5. @View dekorator lub szablon templateurl są obowiązkowe w komponencie.

Dyrektywa

1. Aby zarejestrować dyrektywy, używamy @Directiveadnotacji metadanych.
2. Dyrektywa służy do dodawania zachowania do istniejącego elementu DOM.
3. Dyrektywa służy do projektowania elementów wielokrotnego użytku.
4. Na jeden element DOM można zastosować wiele dyrektyw.
5. Dyrektywa nie korzysta z widoku.

Źródła:

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

Składnik to dyrektywa z szablonem, a @Componentdekorator jest tak naprawdę @Directivedekoratorem wyposażonym w funkcje zorientowane na szablon.

W programie Angular 2 i nowszym „wszystko jest składnikiem”. Komponenty to główny sposób, w jaki budujemy i określamy elementy i logikę na stronie, zarówno za pomocą niestandardowych elementów, jak i atrybutów, które dodają funkcjonalność do naszych istniejących komponentów.

http://learnangular2.com/components/

Ale jakie dyrektywy działają w Angular2 +?

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

Istnieją trzy rodzaje dyrektyw w Angular:

1. Komponenty - dyrektywy z szablonem.
2. Dyrektywy strukturalne - zmień układ DOM, dodając i usuwając elementy DOM.
3. Dyrektywy atrybutów — zmień wygląd lub zachowanie elementu, komponentu lub innej dyrektywy.

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

Tak więc w Angular2 i nowszych wersjach dyrektywy są atrybutami, które dodają funkcje do elementów i komponentów .

Spójrz na próbkę poniżej 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 zrobi, rozszerzy ci komponenty i elementy HTML o dodanie żółtego tła i możesz użyć go jak poniżej:

<p myHighlight>Highlight me!</p>

Ale komponenty utworzą pełne elementy ze wszystkimi funkcjami, takimi 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 użyć go jak poniżej:

<my-component></my-component>

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

Wykrywanie zmian

Tylko @Componentmoże być węzeł w drzewie wykrywania zmian. Oznacza to, że nie można ustawić ChangeDetectionStrategy.OnPushw @Directive. Pomimo tego, dyrektywa może mieć @Inputi @Outputwłaściwości, i można z niej wstrzykiwać i manipulować komponentami hosta ChangeDetectorRef. Użyj Komponentów, gdy potrzebujesz szczegółowej kontroli nad drzewem wykrywania zmian.

W kontekście programowania dyrektywy dostarczają kompilatorowi wskazówek dotyczących zmiany sposobu przetwarzania danych wejściowych, tj. Zmiany niektórych zachowań.

„Dyrektywy umożliwiają dołączanie zachowania do elementów w DOM”.

Dyrektywy są podzielone na 3 kategorie:

• Atrybut
• Strukturalny
• Składnik

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

„Elementy kątowe są podzbiorem dyrektyw. W przeciwieństwie do dyrektyw komponenty zawsze mają szablon i tylko jeden komponent może być utworzony na element w szablonie. ”

Komponenty Angular 2 są implementacją koncepcji Web Component . Składniki sieciowe składają się z kilku oddzielnych technologii. Komponenty sieci Web można traktować jako widżety interfejsu użytkownika wielokrotnego użytku, które są tworzone przy użyciu otwartej technologii internetowej.

• Zatem w dyrektywach podsumowujących Mechanizm, za pomocą którego łączymy zachowanie z elementami w DOM, składający się z typów strukturalnych, atrybutów i komponentów.
• Komponenty są szczególnym rodzajem dyrektywy, która pozwala nam korzystać z funkcjonalności komponentu internetowego AKA wielokrotnego użytku - zamknięte elementy wielokrotnego użytku dostępne w całej naszej aplikacji.

Jeśli odniesiesz się do oficjalnych dokumentów kątowych

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

Istnieją trzy rodzaje dyrektyw w Angular:

1. Komponenty - dyrektywy z szablonem.
2. Dyrektywy strukturalne - zmień układ DOM, dodając i usuwając elementy DOM. np. * ngIf
3. Dyrektywy atrybutów — zmień wygląd lub zachowanie elementu, komponentu lub innej dyrektywy. np. [ngClass].

W miarę wzrostu aplikacji napotykamy trudności w utrzymywaniu wszystkich tych kodów. W celu ponownego użycia rozdzielamy naszą logikę na inteligentne komponenty i głupie komponenty i używamy dyrektyw (strukturalnych lub atrybutów) do wprowadzania zmian w DOM.

składniki

Komponenty są najbardziej podstawowym składnikiem interfejsu użytkownika aplikacji Angular. Aplikacja Angular zawiera drzewo komponentów Angular. Nasza aplikacja w Angular jest zbudowana na drzewie komponentów . Każdy komponent powinien mieć swój szablon, styl, cykl życia, selektor itp. Zatem każdy komponent ma swoją strukturę Możesz traktować je jako osobną, niezależną małą aplikację internetową z własnym szablonem i logiką oraz możliwością komunikacji i używania z innymi składniki.

Przykładowy plik .ts dla składnika:

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 widok szablonu ./app.component.html:

Hello {{title}}

Następnie możesz renderować szablon AppTrainingComponent 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>

jak renderowano tutaj element AppTrainingComponent

Zobacz więcej o komponentach

Dyrektywy

Dyrektywa zmienia wygląd lub zachowanie istniejącego elementu DOM. Na przykład [ngStyle] to dyrektywa. Dyrektywy mogą rozszerzać komponenty (mogą być używane w 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ć).

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