Dyrektywy strukturalne w Angular

Prawdopodobnie znasz kompilację Angular w dyrektywach strukturalnych: ngFor , NgIf , NgSwitch . Ale jak działają, jakie mają właściwości i co się dzieje za kulisami?

W tym artykule chciałbym zrobić mały przewodnik po dyrektywach strukturalnych, pokazać, co się dzieje w szablonie, a następnie użyć dyrektywy, oraz przypadek użycia dekoratora exportAs w dyrektywach strukturalnych.

Krótki przewodnik po dyrektywach w Angular

Dyrektywy Angular służą do zmiany wyglądu lub zachowania elementu DOM. Istnieją trzy rodzaje dyrektyw:

1. Komponenty (z własnym szablonem);
2. Strukturalne , zmieniające strukturę drzewa DOM;
3. Atrybuty zmieniające wygląd lub domyślne zachowanie elementu DOM.

Stworzenie własnej dyrektywy strukturalnej

Na przykład, stwórzmy własną prostą dyrektywę strukturalną addElement , która doda element do strony.

Utworzenie dyrektywy wygląda jak klasa z użyciem atrybutu @Directive , w której mamy selektor opisujący, jak będzie wyglądać nasza dyrektywa po dodaniu do dowolnego elementu.

Dodajmy naszą dyrektywę do jakiegoś elementu. To bardzo proste: dodaj naszą nową dyrektywę do obiektu deklaracji w module komponentu i zawieś naszą dyrektywę na elemencie w szablonie.

Wróćmy teraz do samej klasy dyrektywy, ponieważ jest to dyrektywa strukturalna, a następnie możemy wstrzyknąć do konstruktora następujące usługi:

TemplateRef to widok opakowany w specjalne znaczniki <ng-template />. Dla nas jest to <div>, na którym zawiesiliśmy naszą dyrektywę. Wyjaśnię później, jak odnosi się do tego <ng-template />.

ViewContainerRef to opakowanie wokół naszej dyrektywy.

A teraz, jeśli zdecydujemy się sprawdzić nasz element za pomocą dyrektywy appAddElement w przeglądarce. Wtedy nic nie zobaczymy, ponieważ stworzyliśmy strukturalną dyrektywę, która natychmiast wyrzuca nasz element z DOM.

Aby to naprawić, dodajmy nasz szablon za pośrednictwem naszego kontenera w metodzie OnInit.

A teraz mogliśmy zobaczyć nasz div z zawartością w przeglądarce. Ale na razie nie wygląda to zbyt interesująco. Rozważmy kilka innych funkcji, które moglibyśmy zrobić z dyrektywami.

Dane wejściowe w dyrektywach

Możesz przekazać parametry wejściowe do dyrektywy, tak jak robisz to w komponentach. Ponadto, dla uproszczenia, można wprowadzić nazwę dyrektywy jako dane wejściowe. Dodajmy logikę do naszej dyrektywy i pokażmy element według limitu czasu i przekażmy limit czasu przez parametry wejściowe.

A potem, kiedy wywołujemy naszą dyrektywę, przekazujemy opóźnienie sekund jako parametr wejściowy:

I zgodnie z oczekiwaniami w przeglądarce zobaczymy, że nasz div pojawi się za 3 sekundy.

Szybkie spojrzenie na to, jak dyrektywy strukturalne działają pod maską Angulara

Kiedy Angular zobacz następujący kod:

Wszystko otacza tagiem <ng-template>

A na samym <ng-template> Angular umieszcza prosty atrybut dyrektywy o tej nazwie:

Powyższy zapis jest absolutnie identyczny ze zwykłym zapisem dyrektywy strukturalnej z użyciem *.

Ale teraz możesz zobaczyć, co dokładnie robi poprzednio zadeklarowana w linii kodu konstruktora:

szablon prywatny: TemplateRef <any>

Jest to zawartość tagu ng-template, jak napisałem wcześniej.

A ViewContainerRef zadeklarowany w konstruktorze to sam tag <ng-template> jako opakowanie dla naszej dyrektywy.

I teraz wydaje mi się, że jest jasne, że użycie znaku * w dyrektywie strukturalnej jest tylko cukrem składniowym, pomagającym nam mieć krótszą notację dyrektywy.

ExportAs dekorator i używanie jej z dyrektywami strukturalnymi

Na koniec chciałbym zwrócić uwagę na bardzo przydatną właściwość exportAs , która pozwala nam używać klasy dyrektywy poza elementem, do którego jest ona dołączona. W takim przypadku moglibyśmy wywołać metody dyrektywy bezpośrednio w szablonie komponentu, w którym ta dyrektywa jest używana.

Należy zauważyć, że właściwość exportAs jest częściej używana w dyrektywach atrybutów, ale teraz przyjrzymy się jej działaniu na przykładzie naszej dyrektywy strukturalnej.

Ale są pewne ograniczenia. Aby móc pracować z właściwością exportAs z dyrektywą strukturalną, musimy użyć dyrektywy strukturalnej w formie bez cukru - bez symbolu *

Teraz zmieńmy trochę logikę naszej dyrektywy - przenieśmy logikę wyświetlania treści z ngOnInit do osobnej metody. Dodaj także właściwość exportAs do dekoratora @Directive, czyli w naszym przypadku wyeksportujemy klasę dyrektywy o nazwie „addElement”.

Teraz przejdźmy do wywołania naszej dyrektywy, jak powiedziałem wcześniej, aby móc używać exportAs, będziemy musieli zastosować dyrektywę w formie pozbawionej cukru - bez symbolu *. A teraz, klikając przycisk, bezpośrednio wywołamy metodę switchElement () z naszej klasy dyrektywy, która przełącza widoczność zawartości div.

Dziękuje za przeczytanie! Mam nadzieję, że ten artykuł był przydatny i otworzył tajemnicę działania dyrektyw strukturalnych w Angular. Do zobaczenia w moich następnych postach!