Właśnie zacząłem pracować z Angular 2.

Zastanawiałem się, jakie są różnice między komponentami a dyrektywami w Angular 2?

Zasadniczo istnieją trzy typy dyrektyw w Angular2 zgodnie z dokumentacją.

• Składnik
• Dyrektywy strukturalne
• Dyrektywy atrybutów

Składnik

Jest to również rodzaj dyrektywy z szablonem, stylami i częścią logiczną, która jest najbardziej znanym typem dyrektywy spośród wszystkich w Angular2. W tego typu dyrektywach możesz używać innych dyrektyw, niezależnie od tego, czy są one niestandardowe, czy wbudowane w @Componentadnotację, jak poniżej:

@Component({
    selector: "my-app"
    directives: [custom_directive_here]
})

Skorzystaj z tej dyrektywy jako:

<my-app></my-app>

W przypadku dyrektywy komponentów znalazłem tutaj najlepszy tutorial .

Dyrektywy strukturalne

Podobnie jak *ngFori *ngIf, używane do zmiany układu DOM poprzez dodawanie i usuwanie elementów DOM. wyjaśnione tutaj

Dyrektywy atrybutów

Służą do nadania niestandardowego zachowania lub stylu istniejącym elementom poprzez zastosowanie pewnych funkcji / logiki. Like ngStyleto dyrektywa atrybutów, która dynamicznie nadaje styl elementom. Możemy stworzyć własną dyrektywę i użyć jej jako atrybutu niektórych predefiniowanych lub niestandardowych elementów, oto przykład prostej dyrektywy:

Po pierwsze musimy zaimportować dyrektywę z @angular/core

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

@Directive({
  selector: '[Icheck]',
})
export class RadioCheckbox {
   // custom logic here...
}

Możemy to wykorzystać w widoku, jak pokazano poniżej:

<span Icheck>HEllo Directive</span>

Aby uzyskać więcej informacji, możesz przeczytać oficjalny samouczek tutaj i tutaj

Komponenty mają swój własny widok (HTML i style). Dyrektywy to po prostu „zachowanie” dodawane do istniejących elementów i komponentów.
Componentrozciąga się Directive.

Z tego powodu w elemencie hosta może znajdować się tylko jeden komponent, ale wiele dyrektyw.

Dyrektywy strukturalne to dyrektywy stosowane do <template>elementów i używane do dodawania / usuwania treści (stemplowania szablonu). Aplikacje *dyrektywy in, takie jak, *ngIfpowodują <template>niejawne tworzenie znacznika.

Aby zakończyć to, co powiedział Günter, możemy wyróżnić dwa rodzaje dyrektyw:

• Na te strukturalne że aktualizacje układ DOM poprzez dodawanie lub usuwanie elementów. Dwa popularne to NgFori NgIf. Te są powiązane z koncepcją szablonu i muszą być poprzedzone przedrostkiem *. Aby uzyskać więcej informacji, zobacz sekcję „Szablony i *” w tym linku: http://victorsavkin.com/post/119943127151/angular-2-template-syntax
• Do nich atrybutów że aktualizacje zachowanie wyglądu elementu są przyłączone jeden.

Mam nadzieję, że ci to pomoże, Thierry

Oto aktualna definicja.

• Jeśli ma szablon , jest to komponent
• w przeciwnym razie, jeśli ma selektor w nawiasach „[likethis]”, jest to dyrektywa atrybutów
• inaczej jest to dyrektywa strukturalna .

Każda inna definicja jest błędna.

Podsumowanie:

Komponent to dyrektywa z powiązanym widokiem (tj. HTML do renderowania). Wszystkie składniki są dyrektywami, ale nie wszystkie dyrektywy są składnikami. Istnieją trzy rodzaje dyrektyw:

• Komponent : widok z powiązanym zachowaniem. Ten typ dyrektywy w rzeczywistości dodaje elementy DOM
• Dyrektywy atrybutów : mogą być dołączane do elementów DOM (i komponentów, ponieważ są elementami DOM), aby modyfikować wygląd lub zachowanie elementu.
• Dyrektywy strukturalne : mogą być dołączane do elementów DOM (i komponentów, ponieważ są elementami DOM), aby zmodyfikować układ DOM. Dyrektywy strukturalne zaczynają się od * i faktycznie dodają lub usuwają element DOM. Na przykład, *ngIfktóry może wstawić lub usunąć element DOM (lub komponent kątowy, który jest niestandardowym elementem DOM, ale nadal elementem DOM).

Przykład:

import { Component, HostListener, HostBinding, Directive, ElementRef } from '@angular/core';

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

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf='myBool' appHighlight>Hi there</div>
  `,
  styleUrls: ['./app.component.scss'],
})
export class AppComponent  {

  myBool:boolean = true;

}

W powyższym przykładzie możemy zaobserwować:

• Komponent AppComponentma szablon z <div>elementem, który wyświetla „cześć”.
• Dyrektywa atrybutu HighlightDirective znajduje się w <div>elemencie. Oznacza to, że będzie manipulować zachowaniem <div>elementu. W tym przypadku podświetli tekst i zmieni kolor na żółty.
• Dyrektywa strukturalna *ngIfrównież znajduje się na <div>elemencie i określi, czy element ma zostać wstawiony. Zostanie <div>wyświetlony warunkowo w zależności od tego, czy wyrażenie myBoolmoże zostać wymuszone true.

Angular 2 jest zgodny z modelem architektury komponentu / usługi.

Kątowa 2 Aplikacja składa się z komponentów. Komponent to połączenie szablonu HTML i klasy komponentu (klasa maszynopisu), która kontroluje część ekranu.

Zgodnie z dobrą praktyką klasa komponentu jest używana do powiązania danych z odpowiednim widokiem. Dwukierunkowe wiązanie danych to świetna funkcja zapewniana przez platformę kątową.

Komponentów można używać wielokrotnie w całej aplikacji przy użyciu podanej nazwy selektora.

Komponent to także rodzaj dyrektywy z szablonem.

Pozostałe dwie dyrektywy to

1. Dyrektywy strukturalne - zmień układ DOM poprzez dodawanie i usuwanie elementów DOM. Np .: NgFori NgIf.

2. Dyrektywy atrybutów - zmieniają wygląd lub zachowanie elementu, składnika lub innej dyrektywy. Dawny: NgStyle

W rzeczywistości komponenty są również dyrektywami, ale różnią się między nimi.

Dyrektywy atrybutów :

Dyrektywy atrybutów to klasy, które mogą modyfikować zachowanie lub wygląd pojedynczego elementu. Aby utworzyć dyrektywę atrybutu, zastosuj @Directivedo klasy.

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

@Directive({
     selector: "[custom-attr]", })

export class CustomAttrDirective {

   constructor(element: ElementRef) {
      element.nativeElement.classList.add("bg-success", "text-white");    
   } 
}

Dodanie atrybutu dyrektywy template.html Plik

<tr *ngFor="let item of getProducts(); let i = index" custom-attr>
   <td>{{i + 1}}</td>
   <td>{{item.name}}</td>
</tr>

Dyrektywy strukturalne :

Dyrektywy strukturalne zmieniają układ dokumentu HTML poprzez dodawanie i usuwanie elementów, jako mikro-szablony. Dyrektywy strukturalne umożliwiają warunkowe dodawanie zawartości na podstawie wyniku wyrażenia, takiego jak *ngIflub dla tej samej zawartości, która ma być powtórzona dla każdego obiektu w źródle danych, takim jak *ngFor.

Możesz używać wbudowanych dyrektyw do typowych zadań, ale pisanie niestandardowych dyrektyw strukturalnych zapewnia możliwość dostosowania zachowania do aplikacji.

<p *ngIf="true">
  Expression is true and ngIf is true.
  This paragraph is in the DOM.
</p>
<p *ngIf="false">
  Expression is false and ngIf is false.
  This paragraph is not in the DOM.
</p>

Składniki :

Składniki to dyrektywy, które mają własne szablony, zamiast polegać na zawartości dostarczonej z innego miejsca. Komponenty mają dostęp do wszystkich funkcji dyrektywy, nadal mają element hosta, nadal mogą definiować właściwości wejściowe i wyjściowe itd., Ale definiują również własną zawartość.

Łatwo można nie docenić znaczenia szablonu, ale dyrektywy dotyczące atrybutów i strukturalne mają ograniczenia. Dyrektywy mogą wykonywać pożyteczną i potężną pracę, ale nie mają dużego wglądu w elementy, do których są stosowane. Dyrektywy są najbardziej przydatne, gdy są narzędziami ogólnego przeznaczenia, takimi jak ngModeldyrektywa, którą można zastosować do dowolnej właściwości modelu danych i dowolnego elementu formularza, bez względu na to, do czego służą dane lub element.

Natomiast komponenty są ściśle powiązane z zawartością ich szablonów. Składniki zapewniają dane i logikę, które będą używane przez powiązania danych, które są stosowane do elementów HTML w szablonie, które zapewniają kontekst używany do oceny wyrażeń powiązań danych i działają jako spoiwo między dyrektywami i resztą aplikacji. Komponenty są również użytecznym narzędziem umożliwiającym podzielenie dużych projektów Angular na łatwe do zarządzania fragmenty.

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

import { Hero } from './hero';

@Component({
  selector: 'app-hero-child',
  template: `
    <h3>{{hero.name}} says:</h3>
    <p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
  `
})
export class HeroChildComponent {
  @Input() hero: Hero;
  @Input('master') masterName: string;
}

od oficjalnego kątowego

z książki Pro-Angular