{"id":664,"date":"2023-07-06T16:18:46","date_gmt":"2023-07-06T14:18:46","guid":{"rendered":"https:\/\/dziewczynanafroncie.pl\/?p=664"},"modified":"2023-07-06T16:18:47","modified_gmt":"2023-07-06T14:18:47","slug":"angular-selektory-jak-uzywac","status":"publish","type":"post","link":"https:\/\/dziewczynanafroncie.pl\/angular-selektory-jak-uzywac\/","title":{"rendered":"Selektory – jak u\u017cywa\u0107 ?"},"content":{"rendered":"\n

Je\u017celi stworzy\u0142e\u015b ju\u017c sw\u00f3j pierwszy, b\u0105d\u017a nie jeden komponent zapewne wiesz, \u017ce dekorator @Component<\/code> s\u0142u\u017cy do tego aby framework Angular identyfikowa\u0142 go jako klas\u0119 komponentu wraz z metadanymi. Z kolei one definiuj\u0105 jakiego rodzaju w\u0142a\u015bciwo\u015bci mog\u0105 by\u0107 przez niego u\u017cywane. Bez tego dla sk\u0142adni Angulara by\u0142a by to zwyk\u0142a klasa JavaScript.<\/p>\n\n\n\n\n\n\n\n

Zawarte w dekoratorze metadane m\u00f3wi\u0105 Angularowi, sk\u0105d wzi\u0105\u0107 g\u0142\u00f3wne bloki konstrukcyjne potrzebne do utworzenia komponentu wraz z jego widokiem. W szczeg\u00f3lno\u015bci istotne jest tutaj powi\u0105zanie\u00a0 pomi\u0119dzy nim samym a widokiem, bezpo\u015brednio zawartym w logice komponentu lub poprzez odniesienie do pliku html. <\/p>\n\n\n\n

Komponent wraz ze swoim szablonem opisuj\u0105 widok. <\/div><\/p>\n\n\n\n

Opr\u00f3cz zawarcia lub wskazania na szablon widoku, metadane zawieraj\u0105ce si\u0119 w dekoratorze @Component<\/code> konfiguruj\u0105 na przyk\u0142ad w jaki spos\u00f3b poprzez widok, mo\u017cna si\u0119 do niego odwo\u0142a\u0107, b\u0105d\u017a te\u017c jakich wymaga on dostawc\u00f3w us\u0142ug.<\/p>\n\n\n\n

Wszystkie te w\u0142a\u015bciwo\u015bci sprawiaj\u0105, \u017ce komponent jest kompletnym re-u\u017cywalnym kawa\u0142kiem logiki dla aplikacji Angularowej. <\/div><\/p>\n\n\n\n

Czym jest Selektor ?<\/h3>\n\n\n\n

Jest to jedna z w\u0142a\u015bciwo\u015bci obiektu, kt\u00f3rej u\u017cywamy wraz z konfiguracj\u0105 komponentu. S\u0142u\u017cy on do jednoznacznej identyfikacji ka\u017cdego z nich w drzewie komponent\u00f3w, a tak\u017ce okre\u015bla, w jaki spos\u00f3b jest on reprezentowany w HTML DOM.<\/p>\n\n\n\n

Kiedy tworzymy nowy komponent za pomoc\u0105 Angular CLI, wygl\u0105da on mniej wi\u0119cej tak: \ud83d\ude03<\/p>\n\n\n\n

import { Component } from '@angular\/core';\n \n@Component({\n   selector: 'app-main',\n   templateUrl: '.\/main.component.html',\n   styleUrls: [ '.\/main.component.scss' ]\n })\n\n export class MainComponent  {\n   title = 'This is our new component';\n } <\/code><\/pre>\n\n\n\n
Na powy\u017cszym przyk\u0142adzie zwr\u00f3\u0107my uwag\u0119, \u017ce w metadanych dekoratora @Component<\/code> , zawarta jest w\u0142a\u015bciwo\u015b\u0107 o nazwie selektor<\/code> wraz z unikaln\u0105 nazw\u0105 u\u017cywan\u0105 do identyfikacji MainComponent <\/strong>w drzewie HTML DOM po wyrenderowaniu go w przegl\u0105darce.<\/p>\n\n\n\n
Po otworzeniu naszej aplikacji w przegl\u0105darce, za pomoc\u0105 narz\u0119dzi developerskich mo\u017cemy przej\u015b\u0107 do zak\u0142adki Inspektora gdzie w wyrenderowanym widoku zobaczymy nasz komponent.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Jak wida\u0107 <app-main><\/strong>, zostaje wy-renderowany na samym pocz\u0105tku, poniewa\u017c MainComponent<\/strong> jest g\u0142\u00f3wnym komponentem naszej aplikacji. Je\u015bli mamy jakie\u015b komponenty potomne, to wszystkie s\u0105 renderowane wewn\u0105trz selektora w kt\u00f3rym zosta\u0142y zawarte.<\/p>\n\n\n\n
 <\/i> Zasadniczo w\u0142a\u015bciwo\u015b\u0107 selektora komponentu to po prostu ci\u0105g znak\u00f3w u\u017cywany do identyfikacji komponentu lub elementu w drzewie DOM. <\/div><\/p>\n\n\n\n
Domy\u015blnie nazwa selektora przyjmuje przedrostek app-<\/code> , ale mo\u017ce by\u0107 zmieniona na dowoln\u0105. Nale\u017cy jednak pami\u0119ta\u0107, \u017ce co najmniej dwa selektory komponent\u00f3w nie mog\u0105 by\u0107 takie same.
Ok skoro podstawowe informacj\u0119 mamy ju\u017c wyja\u015bnione pora przyjrze\u0107 si\u0119 r\u00f3\u017cnym sposobom u\u017cywania selektor\u00f3w<\/code>. Na tym etapie jako ciekawostka mog\u0119 zdradzi\u0107 ci, i\u017c selektory<\/code> s\u0105 bardzo przydatne do zachowania sp\u00f3jno\u015bci pod wzgl\u0119dem nazewnictwa komponent\u00f3w, ich hierarchii w naszym projekcie oraz innych specyfikacji niestandardowych.<\/p>\n\n\n\n
Selektor jako Element<\/h3>\n\n\n\n
Jest to podstawowa wersja selektora, w kt\u00f3rej jego nazwa reprezentuje komponent jako element drzewa DOM. Wraz z utworzeniem komponentu, mo\u017cemy ustawi\u0107 w\u0142a\u015bciwo\u015b\u0107 selektora<\/code> aby zawiera\u0142a odpowiedni\u0105 nazw\u0119. B\u0119dzie to nam potrzebne w celu wyrenderowania go jako element w drzewie HTML DOM.

Sp\u00f3jrzmy na jeden prosty przyk\u0142ad, w kt\u00f3rym tworzymy prosty komponent o nazwie main<\/code> ,
a nast\u0119pnie dodajmy do niego plik szablonu.<\/p>\n\n\n\n
import { Component } from '@angular\/core';\n\n @Component({\n   selector: 'app-main',\n   templateUrl: '.\/main.component.html',\n   styleUrls: [ '.\/main.component.css' ]\n })\n\n export class MainComponent  {\n   title = 'This is simple component';\n }<\/code><\/pre>\n\n\n\n
W powy\u017cszym przyk\u0142adzie widzimy komponent aplikacji wraz z selektorem app-main<\/code> jako nazw\u0105 elementu, dzi\u0119ki czemu po wyrenderowaniu komponentu mo\u017cemy zidentyfikowa\u0107 go po okre\u015blonej przez nas wcze\u015bniej nazwie.

Zmodyfikujmy plik main.component.html<\/strong> i wklejmy nast\u0119puj\u0105ce linie kodu.<\/p>\n\n\n\n
<ul>\n  <li>Coffee<\/li>\n  <li>Tea<\/li>\n  <li>Milk<\/li>\n<\/ul> <\/code><\/pre>\n\n\n\n
Teraz uruchommy aplikacj\u0119 i otw\u00f3rzmy zak\u0142adk\u0119 Inspektora w narz\u0119dziach developerskich, aby zobaczy\u0107 wyrenderowany widok <\/i><\/i><\/i><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
W ten spos\u00f3b nasz komponent jest reprezentowany jako element drzewa DOM poprzez okre\u015blon\u0105 przez naz nazw\u0119. W chwili renderowania komponentu, jego zawarto\u015b\u0107 potomna b\u0119dzie znajdowa\u0107 si\u0119 we wn\u0119trzu tego elementu<\/code>.
<\/i> Jest to powszechne podej\u015bcie w Angular. Ka\u017cdy komponent reprezentuje inny selektor, dzi\u0119ki czemu mo\u017cna go jednoznacznie zidentyfikowa\u0107 w HTML DOM. <\/div><\/p>\n\n\n\n
Selektor jako Atrybut<\/h3>\n\n\n\n
Na poprzednim przyk\u0142adzie zapoznali\u015bmy si\u0119 z u\u017cyciem selektora<\/code> jako nazwy elementu. Pami\u0119tajmy o tym jednak, \u017ce nie musimy si\u0119 do tego ogranicza\u0107. Mo\u017cemy r\u00f3wnie\u017c u\u017cy\u0107 selektora jako atrybut elementu<\/code>, tak jak robimy to z innymi elementami, kt\u00f3rych u\u017cywamy na co dzie\u0144 w HTML. 

Nale\u017cy tutaj zwr\u00f3ci\u0107 uwag\u0119, \u017ce atrybuty kt\u00f3re u\u017cywamy standardowo z elementami HTML, takie jak np.: name<\/strong>, id<\/strong>, class<\/strong>, href<\/strong>, src<\/strong>, value <\/strong>itp. W Angularze mo\u017cemy r\u00f3wnie\u017c u\u017cy\u0107 do stworzenia selektora w postaci atrybutu. Stosowanie tego podej\u015bcia jest to ca\u0142kiem \u0142atwe w obs\u0142udze. 

Do u\u017cywania selektora jako atrybutu elementu b\u0119dzie nam potrzebne o rozszerzenie naszej nazwy o  nawiasy kwadratowe [  ]<\/code> , tak jak na poni\u017cszym przyk\u0142adzie.<\/p>\n\n\n\n
selector: '[selector_value]'<\/code><\/pre>\n\n\n\n
Sp\u00f3jrzmy teraz na prosty przyk\u0142ad, w kt\u00f3rym u\u017cyjemy selektora jako atrybutu<\/p>\n\n\n\n
import { Component } from '@angular\/core';\n\n @Component({\n   selector: '[app-main]',\n   templateUrl: '.\/app.component.html',\n   styleUrls: [ '.\/app.component.css' ]\n })\n\n export class MainComponent  {\n   title = 'This is new component';\n }<\/code><\/pre>\n\n\n\n
W\u0142a\u015bnie u\u017cyli\u015bmy dodatkowych nawias\u00f3w kwadratowych wraz z wcze\u015bniej u\u017cyt\u0105 nazw\u0105 naszego selektora. Na ten moment jego warto\u015b\u0107 wygl\u0105da nast\u0119puj\u0105co: [app-main]<\/code>. Pami\u0119tajmy o tym, \u017ce w naszym widoku musimy u\u017cy\u0107 go jako atrybutu, a nie jak wcze\u015bniej jako elementu.

Otw\u00f3rzmy plik index.html<\/code> i zaktualizujmy sekcj\u0119 <app-main><\/strong> w nast\u0119puj\u0105cy spos\u00f3b.<\/p>\n\n\n\n
<!doctype html>\n<html lang=\"pl\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>AppMain<\/title>\n  <base href=\"\/\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  <link rel=\"icon\" type=\"image\/x-icon\" href=\"favicon.ico\">\n<\/head>\n   <body>\n      <div app-main> <\/div> \n   <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Ponownie u\u017cywaj\u0105c narz\u0119dzi developerskich w przegl\u0105darce, wyrenderowany dokument powinien wygl\u0105da\u0107 mniej wi\u0119cej tak <\/i><\/i><\/i><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Jak mo\u017cemy zauwa\u017cy\u0107, znacznik div<\/code> dzia\u0142a teraz jako element wraz z selektorem. Oznacza to \u017ce selektor okre\u015blaj\u0105cy nasz komponent zgodnie z nasz\u0105 konfiguracj\u0105 zachowuje jako atrybut elementu, a nie jak wcze\u015bniej jako element.

Poprzez zastosowanie dodatkowych nawias\u00f3w kwadratowych [  ]<\/code> w nazwie naszego selektora, mo\u017cemy rozr\u00f3\u017cni\u0107 u\u017cycie selektora jako atrybut b\u0105d\u017a jako element.<\/p>\n\n\n\n
Selektor jako nazwa Klasy<\/h3>\n\n\n\n
Do tej pory u\u017cywali\u015bmy selektora jako elementu<\/code> lub jako atrybutu<\/code>, mo\u017cemy r\u00f3wnie\u017c u\u017cy\u0107 go jako klasy. Podobnie jak w powy\u017cszych przyk\u0142adach, wystarczy poda\u0107 nazw\u0119 selektora jako klas\u0119, poprzez zastosowanie odpowiedniej sk\u0142adni. Wtedy element zostanie przekonwertowany na klas\u0119 aby osadzi\u0107 go w HTML DOM.

Zmodyfikujmy plik main.component.ts<\/strong> w nast\u0119puj\u0105cy spos\u00f3b:<\/p>\n\n\n\n
import { Component } from '@angular\/core';\n\n @Component({\n   selector: '.app-main.',\n   templateUrl: '.\/main.component.html',\n   styleUrls: [ '.\/main.component.scss' ]\n })\n\n export class MainComponent  {\n   title = 'This is new component';\n }<\/code><\/pre>\n\n\n\n
W\u0142a\u015bnie zmodyfikowali\u015bmy warto\u015b\u0107 w\u0142a\u015bciwo\u015bci selektor<\/code> w nast\u0119puj\u0105cy spos\u00f3b<\/p>\n\n\n\n
selector: '.selector_value'<\/code><\/pre>\n\n\n\n
poprzez dodanie operatora pojedynczej kropki ( . )<\/code> przed nazw\u0105 selektora, mo\u017cemy u\u017cywa\u0107 go jako nazwy klasy. Zobrazujmy to na poni\u017cszym przyk\u0142adzie.<\/p>\n\n\n\n
<!doctype html>\n<html lang=\"pl\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>AppMain<\/title>\n  <base href=\"\/\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  <link rel=\"icon\" type=\"image\/x-icon\" href=\"favicon.ico\">\n<\/head>\n   <body>\n      <div class=\"app-main\"> <\/div> \n   <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Aby okre\u015bli\u0107 nazw\u0119 klasy kt\u00f3ra b\u0119dzie odzwierciedla\u0107 nasz komponent w pliku HTML, powinni\u015bmy u\u017cy\u0107 atrybutu o nazwie class<\/code> , jak wida\u0107 zastosowali\u015bmy w nim nazw\u0119 naszego selektora app-main<\/strong> jako jego warto\u015b\u0107.<\/p>\n\n\n\n
Je\u015bli otworzymy teraz narz\u0119dzia developerskie w przegl\u0105darce, mo\u017cemy zobaczy\u0107 wyrenderowany dokument w karcie inspektora.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Wraz z elementem div<\/code> dodawana jest nazwa klasy app-main<\/code>, kt\u00f3ra odnosi si\u0119 do nazwy selektora, skonfigurowan\u0105 w pliku komponentu main.component.ts<\/strong>.<\/p>\n\n\n\n
 <\/i> Je\u015bli skonfigurujemy selektor jako klas\u0119, nadal mo\u017cemy renderowa\u0107 elementy potomne w komponencie, tak jak robili\u015bmy to wcze\u015bniej. <\/div><\/p>\n\n\n\n
Podsumowanie<\/h3>\n\n\n\n
W tym artykule nauczyli\u015bmy si\u0119, czym jest selektor<\/code> we frameworku Angular, wraz z przyk\u0142adami u\u017cycia w r\u00f3\u017cnych sytuacjach. Om\u00f3wili\u015bmy r\u00f3wnie\u017c przyk\u0142ady wykorzystania selektor\u00f3w jako element<\/strong>, atrybut <\/strong>i nazw\u0119 klasy<\/strong>, domy\u015blnie b\u0119d\u0105 przez nas u\u017cywane jako elementy. Nale\u017cy zapami\u0119ta\u0107, i\u017c selektor jest jedn\u0105 z podstawowych w\u0142a\u015bciwo\u015bci, kt\u00f3ra jednoznacznie identyfikuje ka\u017cdy komponent. Mam nadzieje \u017ce ten artyku\u0142 by\u0142 dla ciebie przydatny oraz mogli\u015bcie w nim znale\u017a\u0107 istotne informacj\u0119.<\/p>\n\n\n\n
\ud83d\udc47\ud83d\udc47\ud83d\udc47 Je\u017celi podoba\u0142 Ci si\u0119 ten artyku\u0142 b\u0119d\u0119 wdzi\u0119czna za pozostawienie po sobie \u015bladu w komentarzach \ud83d\udc47\ud83d\udc47\ud83d\udc47<\/h6>\n","protected":false},"excerpt":{"rendered":"
W tym przewodniku dowiedzieli\u015bmy si\u0119, czym jest selektor w Angular i jak mo\u017cemy go u\u017cywa\u0107 w r\u00f3\u017cnych sytuacjach. Selektor jest jedn\u0105 z podstawowych w\u0142a\u015bciwo\u015bci, kt\u00f3ra jednoznacznie identyfikuje ka\u017cdy komponent<\/p>\n","protected":false},"author":1,"featured_media":684,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[13,47,48,30],"class_list":["post-664","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-angular","tag-komponenty","tag-metadane","tag-selektory"],"_links":{"self":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts\/664","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=664"}],"version-history":[{"count":3,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts\/664\/revisions"}],"predecessor-version":[{"id":800,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/posts\/664\/revisions\/800"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/media\/684"}],"wp:attachment":[{"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/media?parent=664"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/categories?post=664"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dziewczynanafroncie.pl\/api\/wp\/v2\/tags?post=664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}