W czasie pracy z frameworkiem Angular przyjdzie spotka\u0107 Wam si\u0119 z poj\u0119ciem dyrektywy. W tym artykule najpierw zrozumiemy, czym dok\u0142adnie jest dyrektywa oraz jak ich u\u017cywa\u0107. Stworzymy r\u00f3wnie\u017c w\u0142asne niestandardowe dyrektywy. Na co czeka\u0107 ? Gotowi i pe\u0142ni zapa\u0142u ? Tak wi\u0119c zaczynajmy \ud83d\ude03<\/p>\n\n\n\n\n\n\n\n
Og\u00f3lnymi s\u0142owami dyrektywy to funkcje, kt\u00f3re zostan\u0105 wykonane, gdy kompilator Angular je znajdzie. Dyrektywy zwi\u0119kszaj\u0105 mo\u017cliwo\u015bci jakie posiadaj\u0105 elementy HTML, do\u0142\u0105czaj\u0105c niestandardowe zachowania do drzewa DOM.<\/p>\n\n\n\n
Zgodnie z podstawow\u0105 koncepcj\u0105 mo\u017cemy podzieli\u0107 je na trzy kategorie<\/p>\n\n\n\n
Dyrektywy atrybut\u00f3w s\u0105 odpowiedzialne za manipulowanie wygl\u0105dem i zachowaniem element\u00f3w DOM. Mo\u017cemy u\u017cy\u0107 ich do zmiany stylu tych w\u0142a\u015bnie element\u00f3w. Dyrektywy te s\u0105 r\u00f3wnie\u017c u\u017cywane do warunkowego ukrywania lub pokazywania poszczeg\u00f3lnych element\u00f3w. Angular zapewnia wiele wbudowanych dyrektyw atrybut\u00f3w, takich jak NgStyle, NgClass<\/strong> itp. Mo\u017cemy r\u00f3wnie\u017c tworzy\u0107 w\u0142asne niestandardowe dyrektywy atrybut\u00f3w, je\u017celi chcemy zastosowa\u0107 jak\u0105\u015b w\u0142asn\u0105 funkcjonalno\u015b\u0107.<\/p>\n\n\n\n Dyrektywy strukturalne s\u0105 odpowiedzialne za zmian\u0119 struktury DOM. Dzia\u0142aj\u0105 poprzez dodawanie lub usuwanie element\u00f3w z drzewa DOM, w przeciwie\u0144stwie do dyrektyw atrybut\u00f3w, kt\u00f3re po prostu zmieniaj\u0105 sam wygl\u0105d lub zachowanie elementu.<\/p>\n\n\n\n Mo\u017cemy \u0142atwo odr\u00f3\u017cni\u0107 dyrektyw\u0119 strukturaln\u0105 od dyrektywy atrybutu, przygl\u0105daj\u0105c si\u0119 jej sk\u0142adni. Nazwa Dyrektywy Strukturalnej zawsze poprzedzona b\u0119dzie prefiksem gwiazdki(*)<\/strong>, podczas gdy Dyrektywa Atrybutu nie zawiera \u017cadnego prefiksu. Trzy najpopularniejsze wbudowane dyrektywy strukturalne dost\u0119pne w Angularze to NgIf, NgFor i NgSwitch<\/strong>.<\/p>\n\n\n\n Komponenty to dyrektywy kt\u00f3re posiadaj\u0105 szablon, jest to jedyn\u0105 r\u00f3\u017cnic\u0105 mi\u0119dzy komponentami a pozosta\u0142ymi dwoma typami dyrektyw. Dyrektywy atrybut\u00f3w i dyrektywy strukturalne nie maj\u0105 szablon\u00f3w. Mo\u017cemy wi\u0119c powiedzie\u0107, \u017ce Komponent jest czystsz\u0105 wersj\u0105 Dyrektywy z szablonem, kt\u00f3ry jest prostszy w u\u017cyciu.<\/p>\n\n\n\n W Angularze dost\u0119pnych jest wiele wbudowanych dyrektyw, z kt\u00f3rych mo\u017cna \u0142atwo korzysta\u0107. W tej sekcji u\u017cyjemy dw\u00f3ch bardzo prostych dyrektyw wbudowanych.<\/p>\n\n\n\n Dyrektywa NgStyle to dyrektywa atrybutu u\u017cywana do zmiany stylu dowolnego elementu DOM na podstawie okre\u015blonego warunku.<\/p>\n\n\n\n W przyk\u0142adzie kodu powy\u017cej, okre\u015blamy kolor t\u0142a elementu na kt\u00f3rym zastosowana zosta\u0142a dyrektywa je\u017celi warto\u015b\u0107 zmiennej Dyrektywa NgIf<\/strong> to dyrektywa strukturalna u\u017cywana do dodawania element\u00f3w do drzewa DOM zgodnie z okre\u015blonymi przez nas warunkami.<\/p>\n\n\n\n W powy\u017cszym przyk\u0142adzie, ca\u0142y element div pozostanie w drzewie DOM tylko wtedy je\u017celi warto\u015b\u0107 zmiennej display b\u0119dzie prawdziwa, w przeciwnym wypadku zostanie z niego usuni\u0119ty.<\/p>\n\n\n\n Utworzenie w\u0142asnej dyrektywy przypomina troch\u0119 utworzenie komponentu. Aby utworzy\u0107 w\u0142asn\u0105 dyrektyw\u0119, musimy zast\u0105pi\u0107 dekorator @Component<\/strong> dekoratorem @Directive<\/strong>.<\/p>\n\n\n\n Zacznijmy wi\u0119c od stworzenia naszej pierwszej w\u0142asnej dyrektywy ExampleAttributeDirective<\/strong>. W tej dyrektywie pod\u015bwietlimy wybrany element DOM, ustawiaj\u0105c kolor t\u0142a jego elementu.<\/p>\n\n\n\n Utw\u00f3rzmy plik o nazwie app-higlight-element.directive.ts<\/strong> w folderze src\/app\/directives<\/strong> i wklejmy do niej poni\u017cszy kod.<\/p>\n\n\n\n Importujemy Dyrektyw\u0119 i ElementRef<\/strong> z @angular\/core<\/strong>. Dyrektywa zapewnia funkcjonalno\u015b\u0107 dekoratora @Directive<\/strong>, w kt\u00f3rym wskazujemy selektor do appHighLightDirective<\/strong>, dzi\u0119ki czemu mo\u017cemy u\u017cywa\u0107 naszej dyrektywy w dowolnym miejscu aplikacji. Importujemy r\u00f3wnie\u017c ElementRef<\/strong>, kt\u00f3ry jest odpowiedzialny za dost\u0119p do elementu DOM.<\/p>\n\n\n\n Teraz aby nasza dyrektywa dzia\u0142a\u0142a musimy doda\u0107 j\u0105 do tablicy deklaracji modu\u0142u g\u0142\u00f3wnego aplikacji app.module.ts<\/strong><\/p>\n\n\n\n Teraz pora u\u017cy\u0107 naszej nowo utworzonej dyrektywy. W tym przyk\u0142adzie zastosujemy selektor appHighlightElement<\/strong> na elemencie w pliku app.component.html, natomiast wy mo\u017cecie u\u017cy\u0107 jej gdzie tylko chcecie pod warunkiem, i\u017c jest to plik HTML.<\/p>\n\n\n\n Zobrazowanie tego co zrobili\u015bmy powinno wygl\u0105da\u0107 w spos\u00f3b nast\u0119puj\u0105cy.<\/p>\n\n\n\n \n W poprzedniej sekcji utworzyli\u015bmy nasz\u0105 pierwsz\u0105 dyrektyw\u0119 atrybutu<\/strong>. To samo podej\u015bcie b\u0119dziemy stosowa\u0107 r\u00f3wnie\u017c przy tworzeniu dyrektywy strukturalnej<\/strong>.<\/p>\n\n\n\n Zacznijmy wi\u0119c od utworzenia naszej Dyrektywy Strukturalnej. Zaimplementujemy w niej dyrektyw\u0119 *appNotIf<\/strong>, kt\u00f3ra b\u0119dzie dzia\u0142a\u0107 w przeciwie\u0144stwie do *ngIf<\/strong>.<\/p>\n\n\n\n Teraz utw\u00f3rz plik app-notif.directive.ts<\/strong> w folderze src\/directives\/app<\/strong> i wkleimy do niej poni\u017cszy kod:<\/p>\n\n\n\n Jak widzicie w przedstawionym przyk\u0142adzie, do importowali\u015bmy Directive, Input, TempateRef i ViewContainerRef z @angular\/core <\/strong>.<\/p>\n\n\n\n Teraz, aby nasz utworzona dyrektywa appNotIf<\/strong> dzia\u0142a\u0142a prawid\u0142owo, musimy doda\u0107 j\u0105 do tablicy deklaracji w pliku app.module.ts<\/strong> tak samo jak poprzednio dla dyrektywy atrybutu.<\/p>\n\n\n\n Voil\u00e0 !<\/strong> \ud83d\ude0a Teraz mo\u017cemy przej\u015b\u0107 do u\u017cycia naszej dyrektywy. Zastosujemy j\u0105 na elemencie w pliku app.component.html, tak jak poprzednio mo\u017cecie u\u017cy\u0107 jej w innym miejscu aplikacji.<\/p>\n\n\n\n Dyrektywa *appNotIf<\/strong> zosta\u0142a utworzona przez nas w taki spos\u00f3b, \u017ce do\u0142\u0105cza element w postaci szablonu do drzewa DOM, je\u015bli warto\u015b\u0107 *appNotIf<\/strong> b\u0119dzie false<\/strong>, z za\u0142o\u017cenia jest dok\u0142adnym przeciwie\u0144stwem wbudowanej dyrektywy dyrektywy *ngIf<\/strong>.<\/p>\n\n\n\n Wynik ko\u0144cowy powinien wygl\u0105da\u0107 w spos\u00f3b nast\u0119puj\u0105cy.<\/p>\n\n\n\n \n Mam nadziej\u0119, \u017ce ten artyku\u0142 odpowiedzia\u0142 na wi\u0119kszo\u015b\u0107 waszych pyta\u0144 dotycz\u0105cych dyrektyw stosowanych w Angularze. Je\u015bli masz jakie\u015b pytania lub w\u0105tpliwo\u015bci, napisz o tym w komentarzu ch\u0119tnie odpowiem \ud83d\ude0a.<\/p>\n\n\n\n Je\u015bli podoba\u0142o Ci si\u0119 to, co czytasz, lub je\u015bli masz jakie\u015b pytania zostaw komentarz i \u0142apk\u0119 w g\u00f3r\u0119 \ud83d\ude0a<\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":" W czasie pracy z frameworkiem Angular przyjdzie spotka\u0107 Wam si\u0119 z poj\u0119ciem dyrektywy. W tym artykule najpierw zrozumiemy, czym dok\u0142adnie jest dyrektywa oraz jak ich u\u017cywa\u0107. Stworzymy r\u00f3wnie\u017c w\u0142asne niestandardowe dyrektywy. Na co czeka\u0107 ? Gotowi i pe\u0142ni zapa\u0142u ? Tak wi\u0119c zaczynajmy :)<\/p>\n","protected":false},"author":1,"featured_media":653,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[13,46,45,42,43],"class_list":["post-651","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-angular","tag-dom","tag-dyrektywy","tag-input","tag-output"],"_links":{"self":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts\/651","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/comments?post=651"}],"version-history":[{"count":2,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts\/651\/revisions"}],"predecessor-version":[{"id":680,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts\/651\/revisions\/680"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/media\/653"}],"wp:attachment":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/media?parent=651"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/categories?post=651"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/tags?post=651"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Dyrektywy Strukturalne<\/h3>\n\n\n\n
Komponenty<\/h3>\n\n\n\n
Jak pos\u0142ugiwa\u0107 si\u0119 wbudowanymi dyrektywami ?<\/h3>\n\n\n\n
<div [ngStyle]=\"{'background': isColor ? 'orange' : null}\">\n \u00a0\u00a0Jestem dyrektyw\u0105 atrybutu\n<\/div> <\/code><\/pre>\n\n\n\nisColor<\/code> jest prawdziwa, w przeciwnym wypadku efekt zmiany koloru t\u0142a nie zostanie zastosowany<\/p>\n\n\n\n<div *ngIf=\"display\">Jestem dyrektyw\u0105 strukturaln\u0105<\/div> <\/code><\/pre>\n\n\n\nJak utworzy\u0107 w\u0142asn\u0105 dyrektyw\u0119 atrybut\u00f3w ?<\/h3>\n\n\n\n
Plik app-higlight-element.directive<\/strong> (TS)<\/strong><\/h5>\n\n\n\n
import { Directive, ElementRef } from '@angular\/core';\n \u00a0\n@Directive({\n\u00a0\u00a0\u00a0 selector: '[appHighlightElement]'\n})\n\nexport class HighlightElementDirective {\n\u00a0\u00a0\u00a0 constructor(private eleRef: ElementRef) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 eleRef.nativeElement.style.background = 'orange';\n}} <\/code><\/pre>\n\n\n\napp,module.ts (G\u0142\u00f3wny modu\u0142 aplikacji)<\/strong><\/h5>\n\n\n\n
import ...;\nimport { ExampleAttributeDirective } from '.\/directives\/app-higlight-element.directive';\n\n@NgModule({\n declarations: [AppComponent,ChangeThemeDirective],\n imports: [...],\n providers: [],\n bootstrap: [AppComponent]\n})\n\nexport class AppModule { } <\/code><\/pre>\n\n\n\n<h4 appHighlightElement >Pod\u015bwietlony tekst za pomoc\u0105 dyrektywy<\/h4> <\/code><\/pre>\n\n\n\nPod\u015bwietlony tekst za pomoc\u0105 dyrektywy<\/h4> \n<\/p>\n<\/div>\n\n\n\n
Jak utworzy\u0107 w\u0142asn\u0105 dyrektyw\u0119 strukturaln\u0105 ?<\/h3>\n\n\n\n
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular\/core';\n\n@Directive({\n\u00a0\u00a0\u00a0 selector: '[appNotIf]'\n})\n\nexport class AppNotIfDirective {\n \n constructor(\n\u00a0\u00a0\u00a0 private templateRef: TemplateRef<any>,\n\u00a0\u00a0\u00a0 private viewContainer: ViewContainerRef) { }\n \u00a0\u00a0\u00a0 \n @Input() set appNotIf(condition: boolean) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (!condition) {\n\u00a0\u00a0\u00a0 this.viewContainer.createEmbeddedView(this.templateRef);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 } else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 this.viewContainer.clear();\n \u00a0\u00a0\u00a0\u00a0\u00a0}\n}} <\/code><\/pre>\n\n\n\napp,module.ts (G\u0142\u00f3wny modu\u0142 aplikacji)<\/strong><\/h5>\n\n\n\n
import ...;\nimport { AppNotDirective } from '.\/directives\/app-notif.directive';\n\n@NgModule({\n declarations: [AppComponent,AppNotIfDirective],\n imports: [...],\n providers: [],\n bootstrap: [AppComponent]\n})\n\nexport class AppModule { } <\/code><\/pre>\n\n\n\n<div *appNotIf=\"true\">Ukryj element je\u017celi true<\/div >\n<div *appNotIf=\"false\">Poka\u017c element je\u017celi false<\/div> <\/code><\/pre>\n\n\n\nWnioski<\/h3>\n\n\n\n
\ud83d\udc47\ud83d\udc47\ud83d\udc47 Je\u017celi podoba\u0142 Ci si\u0119 ten artyku\u0142 zostaw po sobie \u015blad w komentarzach \ud83d\udc47\ud83d\udc47\ud83d\udc47<\/h6>\n\n\n\n