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:
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.
Nie widzisz celu dyrektyw atrybutów. Co oferują poza CSS?
Tim McNamara,
3
@TimMcNamara, dyrektywy Angular mogą mieć logikę / metody, dlatego możesz zrobić więcej z dyrektywą atrybutów niż z samym CSS. Możesz przekazać jakąś wartość właściwości nadrzędnej do dyrektywy atrybutu i sprawić, by element wyglądał lub zachowywał się inaczej w zależności od tej wartości właściwości.
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).
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
Dyrektywy strukturalne - zmień układ DOM poprzez dodawanie i usuwanie elementów DOM. Np .: NgFori NgIf.
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.
<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;
}
Odpowiedzi:
Zasadniczo istnieją trzy typy dyrektyw w Angular2 zgodnie z dokumentacją.
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
@Component
adnotację, jak poniżej:Skorzystaj z tej dyrektywy jako:
W przypadku dyrektywy komponentów znalazłem tutaj najlepszy tutorial .
Dyrektywy strukturalne
Podobnie jak
*ngFor
i*ngIf
, używane do zmiany układu DOM poprzez dodawanie i usuwanie elementów DOM. wyjaśnione tutajDyrektywy atrybutów
Służą do nadania niestandardowego zachowania lub stylu istniejącym elementom poprzez zastosowanie pewnych funkcji / logiki. Like
ngStyle
to 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
Możemy to wykorzystać w widoku, jak pokazano poniżej:
Aby uzyskać więcej informacji, możesz przeczytać oficjalny samouczek tutaj i tutaj
źródło
Komponenty mają swój własny widok (HTML i style). Dyrektywy to po prostu „zachowanie” dodawane do istniejących elementów i komponentów.
Component
rozcią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,*ngIf
powodują<template>
niejawne tworzenie znacznika.źródło
Aby zakończyć to, co powiedział Günter, możemy wyróżnić dwa rodzaje dyrektyw:
NgFor
iNgIf
. 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-syntaxMam nadzieję, że ci to pomoże, Thierry
źródło
Oto aktualna definicja.
Każda inna definicja jest błędna.
źródło
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:
*ngIf
który może wstawić lub usunąć element DOM (lub komponent kątowy, który jest niestandardowym elementem DOM, ale nadal elementem DOM).Przykład:
W powyższym przykładzie możemy zaobserwować:
AppComponent
ma szablon z<div>
elementem, który wyświetla „cześć”.<div>
elemencie. Oznacza to, że będzie manipulować zachowaniem<div>
elementu. W tym przypadku podświetli tekst i zmieni kolor na żółty.*ngIf
ró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żeniemyBool
może zostać wymuszonetrue
.źródło
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
Dyrektywy strukturalne - zmień układ DOM poprzez dodawanie i usuwanie elementów DOM. Np .:
NgFor
iNgIf
.Dyrektywy atrybutów - zmieniają wygląd lub zachowanie elementu, składnika lub innej dyrektywy. Dawny:
NgStyle
źródło
W rzeczywistości komponenty są również dyrektywami, ale różnią się między nimi.
Dyrektywy atrybutów to klasy, które mogą modyfikować zachowanie lub wygląd pojedynczego elementu. Aby utworzyć dyrektywę atrybutu, zastosuj
@Directive
do klasy.Dodanie atrybutu dyrektywy template.html Plik
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
*ngIf
lub 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.
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
ngModel
dyrektywa, 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.
od oficjalnego kątowego
z książki Pro-Angular
źródło