Selektory – jak używać ?

Jeżeli stworzyłeś już swój pierwszy, bądź nie jeden komponent zapewne wiesz, że dekorator @Component służy do tego aby framework Angular identyfikował go jako klasę komponentu wraz z metadanymi. Z kolei one definiują jakiego rodzaju właściwości mogą być przez niego używane. Bez tego dla składni Angulara była by to zwykła klasa JavaScript.

Zawarte w dekoratorze metadane mówią Angularowi, skąd wziąć główne bloki konstrukcyjne potrzebne do utworzenia komponentu wraz z jego widokiem. W szczególności istotne jest tutaj powiązanie  pomiędzy nim samym a widokiem, bezpośrednio zawartym w logice komponentu lub poprzez odniesienie do pliku html.

Oprócz zawarcia lub wskazania na szablon widoku, metadane zawierające się w dekoratorze @Component konfigurują na przykład w jaki sposób poprzez widok, można się do niego odwołać, bądź też jakich wymaga on dostawców usług.

Czym jest Selektor ?

Jest to jedna z właściwości obiektu, której używamy wraz z konfiguracją komponentu. Służy on do jednoznacznej identyfikacji każdego z nich w drzewie komponentów, a także określa, w jaki sposób jest on reprezentowany w HTML DOM.

Kiedy tworzymy nowy komponent za pomocą Angular CLI, wygląda on mniej więcej tak: 😃

import { Component } from '@angular/core';
 
@Component({
   selector: 'app-main',
   templateUrl: './main.component.html',
   styleUrls: [ './main.component.scss' ]
 })
 export class MainComponent  {
   title = 'This is our new component';
 } 

Na powyższym przykładzie zwróćmy uwagę, że w metadanych dekoratora @Component , zawarta jest właściwość o nazwie selektor wraz z unikalną nazwą używaną do identyfikacji MainComponent w drzewie HTML DOM po wyrenderowaniu go w przeglądarce.

Po otworzeniu naszej aplikacji w przeglądarce, za pomocą narzędzi developerskich możemy przejść do zakładki Inspektora gdzie w wyrenderowanym widoku zobaczymy nasz komponent.

Jak widać <app-main>, zostaje wy-renderowany na samym początku, ponieważ MainComponent jest głównym komponentem naszej aplikacji. Jeśli mamy jakieś komponenty potomne, to wszystkie są renderowane wewnątrz selektora w którym zostały zawarte.

Domyślnie nazwa selektora przyjmuje przedrostek app- , ale może być zmieniona na dowolną. Należy jednak pamiętać, że co najmniej dwa selektory komponentów nie mogą być takie same.
Ok skoro podstawowe informację mamy już wyjaśnione pora przyjrzeć się różnym sposobom używania selektorów. Na tym etapie jako ciekawostka mogę zdradzić ci, iż selektory są bardzo przydatne do zachowania spójności pod względem nazewnictwa komponentów, ich hierarchii w naszym projekcie oraz innych specyfikacji niestandardowych.

Selektor jako Element

Jest to podstawowa wersja selektora, w której jego nazwa reprezentuje komponent jako element drzewa DOM. Wraz z utworzeniem komponentu, możemy ustawić właściwość selektora aby zawierała odpowiednią nazwę. Będzie to nam potrzebne w celu wyrenderowania go jako element w drzewie HTML DOM.

Spójrzmy na jeden prosty przykład, w którym tworzymy prosty komponent o nazwie main ,
a następnie dodajmy do niego plik szablonu.

import { Component } from '@angular/core';
 @Component({
   selector: 'app-main',
   templateUrl: './main.component.html',
   styleUrls: [ './main.component.css' ]
 })
 export class MainComponent  {
   title = 'This is simple component';
 }

W powyższym przykładzie widzimy komponent aplikacji wraz z selektorem app-main jako nazwą elementu, dzięki czemu po wyrenderowaniu komponentu możemy zidentyfikować go po określonej przez nas wcześniej nazwie.

Zmodyfikujmy plik main.component.html i wklejmy następujące linie kodu.

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul> 

Teraz uruchommy aplikację i otwórzmy zakładkę Inspektora w narzędziach developerskich, aby zobaczyć wyrenderowany widok

W ten sposób nasz komponent jest reprezentowany jako element drzewa DOM poprzez określoną przez naz nazwę. W chwili renderowania komponentu, jego zawartość potomna będzie znajdować się we wnętrzu tego elementu.

Selektor jako Atrybut

Na poprzednim przykładzie zapoznaliśmy się z użyciem selektora jako nazwy elementu. Pamiętajmy o tym jednak, że nie musimy się do tego ograniczać. Możemy również użyć selektora jako atrybut elementu, tak jak robimy to z innymi elementami, których używamy na co dzień w HTML.

Należy tutaj zwrócić uwagę, że atrybuty które używamy standardowo z elementami HTML, takie jak np.: name, id, class, href, src, value itp. W Angularze możemy również użyć do stworzenia selektora w postaci atrybutu. Stosowanie tego podejścia jest to całkiem łatwe w obsłudze.

Do używania selektora jako atrybutu elementu będzie nam potrzebne o rozszerzenie naszej nazwy o nawiasy kwadratowe [ ] , tak jak na poniższym przykładzie.

selector: '[selector_value]'

Spójrzmy teraz na prosty przykład, w którym użyjemy selektora jako atrybutu

import { Component } from '@angular/core';
 @Component({
   selector: '[app-main]',
   templateUrl: './app.component.html',
   styleUrls: [ './app.component.css' ]
 })
 export class MainComponent  {
   title = 'This is new component';
 }

Właśnie użyliśmy dodatkowych nawiasów kwadratowych wraz z wcześniej użytą nazwą naszego selektora. Na ten moment jego wartość wygląda następująco: [app-main]. Pamiętajmy o tym, że w naszym widoku musimy użyć go jako atrybutu, a nie jak wcześniej jako elementu.

Otwórzmy plik index.html i zaktualizujmy sekcję <app-main> w następujący sposób.

<!doctype html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>AppMain</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
   <body>
      <div app-main> </div> 
   </body>
</html>

Ponownie używając narzędzi developerskich w przeglądarce, wyrenderowany dokument powinien wyglądać mniej więcej tak

Jak możemy zauważyć, znacznik div działa teraz jako element wraz z selektorem. Oznacza to że selektor określający nasz komponent zgodnie z naszą konfiguracją zachowuje jako atrybut elementu, a nie jak wcześniej jako element.

Poprzez zastosowanie dodatkowych nawiasów kwadratowych [ ] w nazwie naszego selektora, możemy rozróżnić użycie selektora jako atrybut bądź jako element.

Selektor jako nazwa Klasy

Do tej pory używaliśmy selektora jako elementu lub jako atrybutu, możemy również użyć go jako klasy. Podobnie jak w powyższych przykładach, wystarczy podać nazwę selektora jako klasę, poprzez zastosowanie odpowiedniej składni. Wtedy element zostanie przekonwertowany na klasę aby osadzić go w HTML DOM.

Zmodyfikujmy plik main.component.ts w następujący sposób:

import { Component } from '@angular/core';
 @Component({
   selector: '.app-main.',
   templateUrl: './main.component.html',
   styleUrls: [ './main.component.scss' ]
 })
 export class MainComponent  {
   title = 'This is new component';
 }

Właśnie zmodyfikowaliśmy wartość właściwości selektor w następujący sposób

selector: '.selector_value'

poprzez dodanie operatora pojedynczej kropki ( . ) przed nazwą selektora, możemy używać go jako nazwy klasy. Zobrazujmy to na poniższym przykładzie.

<!doctype html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>AppMain</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
   <body>
      <div class="app-main"> </div> 
   </body>
</html>

Aby określić nazwę klasy która będzie odzwierciedlać nasz komponent w pliku HTML, powinniśmy użyć atrybutu o nazwie class , jak widać zastosowaliśmy w nim nazwę naszego selektora app-main jako jego wartość.

Jeśli otworzymy teraz narzędzia developerskie w przeglądarce, możemy zobaczyć wyrenderowany dokument w karcie inspektora.

Wraz z elementem div dodawana jest nazwa klasy app-main, która odnosi się do nazwy selektora, skonfigurowaną w pliku komponentu main.component.ts.

Podsumowanie

W tym artykule nauczyliśmy się, czym jest selektor we frameworku Angular, wraz z przykładami użycia w różnych sytuacjach. Omówiliśmy również przykłady wykorzystania selektorów jako element, atrybut i nazwę klasy, domyślnie będą przez nas używane jako elementy. Należy zapamiętać, iż selektor jest jedną z podstawowych właściwości, która jednoznacznie identyfikuje każdy komponent. Mam nadzieje że ten artykuł był dla ciebie przydatny oraz mogliście w nim znaleźć istotne informację.

👇👇👇 Jeżeli podobał Ci się ten artykuł będę wdzięczna za pozostawienie po sobie śladu w komentarzach 👇👇👇