Aby stworzyć nowy komponent, użyj Angular CLI w katalogu głównym Twojego projektu. Struktura polecenia wygląda następująco:
ng generate component nazwa-komponentu
Lub w skrócie:
ng g c nazwa-komponentu
Po wykonaniu tego polecenia Angular CLI automatycznie generuje nowy katalog nazwa-komponentu
w folderze /src/app/
z czterema plikami:
nazwa-komponentu.component.ts
– plik klasy komponentu, zawierający logikę komponentu.nazwa-komponentu.component.html
– plik szablonu, definiujący strukturę HTML komponentu.nazwa-komponentu.component.css
– plik stylów CSS, określający wygląd komponentu.nazwa-komponentu.component.spec.ts
– plik testu jednostkowego dla komponentu.
Krok 4: Edycja komponentu
Otwórz wygenerowane pliki w swoim ulubionym edytorze kodu i zacznij dostosowywać komponent do swoich potrzeb. Możesz edytować plik klasy komponentu (.ts
) dodając logikę, manipulować wyglądem poprzez plik stylów (.css
) oraz definiować strukturę komponentu w pliku szablonu (.html
).
Struktura tradycyjnego komponentu plik .ts
Komponent MyComponentComponent
jest przykładem komponentu standalone w Angularze 17, co oznacza, że został zdefiniowany bez konieczności używania tradycyjnego NgModule
. To uproszczone podejście jest nowością w Angularze 17 i ma na celu zmniejszenie złożoności aplikacji.
import { Component } from '@angular/core';
@Component({
selector: 'app-my-component',
standalone: true,
imports: [],
templateUrl: './my-component.component.html',
styleUrl: './my-component.component.css'
})
export class MyComponentComponent {
}
Importy
W komponencie zaimportowano jedynie podstawowy moduł:
import { Component } from '@angular/core';
Component
jest dekoratorem z biblioteki @angular/core
, który pozwala Angularowi rozpoznać klasę jako komponent oraz dostarcza metadane, które konfigurują zachowanie komponentu.
Dekorator @Component
Dekorator @Component
jest wykorzystywany do definiowania kluczowych właściwości komponentu, takich jak jego selektor, szablon, style i innych zależności:
@Component({
selector: 'app-my-component',
standalone: true,
imports: [],
templateUrl: './my-component.component.html',
styleUrl: './my-component.component.css'
})
- selector:
app-my-component
jest to unikalna nazwa selektora, używana do wstrzykiwania komponentu w szablonach HTML innych komponentów lub stron. - standalone: Ustawienie
true
oznacza, że komponent jest samowystarczalny i nie potrzebuje być deklarowany w żadnymNgModule
, co jest znaczącą zmianą w stosunku do wcześniejszych wersji Angulara. - imports: W tym przykładzie jest pusta tablica, ale zwykle można tutaj umieścić inne komponenty, dyrektywy lub moduły, które są używane w szablonie komponentu.
- templateUrl: Ścieżka do pliku HTML, który zawiera szablon widoku komponentu. Szablon definiuje strukturę HTML i powiązania danych widoczne w przeglądarce.
- styleUrl: Ścieżka do pliku CSS zawierającego style dla komponentu.
Klasa Komponentu MyComponentComponent
export class MyComponentComponent {
// Tu można dodać logikę komponentu
}
Krok 5: Użycie komponentu
Jeżeli chcesz użyć MyComponentComponent
w AppComponent
, który również jest komponentem standalone, oto jak to zrobić:
1.Zaimportuj Komponent: Najpierw musisz zaimportować MyComponentComponent
w pliku TypeScript komponentu, który go używa.
import { MyComponentComponent } from './path/to/my-component.component';
2.Dodaj do Imports w Dekoratorze @Component: Następnie dodaj MyComponentComponent
do listy imports
w dekoratorze @Component
komponentu, który go używa.
// app.component.ts
import { Component } from '@angular/core';
import { MyComponentComponent } from './my-component/my-component.component'; // Ustal odpowiednią ścieżkę dostępu
@Component({
selector: 'app-root',
standalone: true,
imports: [MyComponentComponent], // Importowanie MyComponentComponent
templateUrl: './app.component.html',
styleUrl: ['./app.component.css']
})
export class AppComponent {
// Tutaj można dodać dodatkową logikę
}
3.Użycie w HTML: Teraz MyComponentComponent
jest dostępny do użycia w szablonie AppComponent
, co oznacza, że możesz użyć jego selektora app-my-component
w HTML.
<!-- app.component.html -->
<div>
<h1>Witaj w mojej aplikacji!</h1>
<app-my-component></app-my-component>
</div>
Generowanie nowego komponentu z parametrem Inline Template
Opcja --inlineTemplate
w Angular CLI służy do tworzenia komponentów z tzw. „inline template”, czyli szablonem HTML umieszczonym bezpośrednio w pliku klasy komponentu zamiast w osobnym pliku .html
. To podejście może być przydatne w przypadku bardzo prostych komponentów lub gdy preferujesz trzymanie całej definicji komponentu w jednym pliku dla łatwiejszej orientacji.
Różnice między Inline Template a Tradycyjnym Komponentem
Tradycyjny Komponent:
- Ma szablon HTML umieszczony w osobnym pliku
.html
. - Jest to standardowe podejście, które pomaga utrzymać porządek w projektach, szczególnie gdy szablony stają się bardziej złożone.
- Ułatwia współpracę i utrzymanie kodu, ponieważ HTML i logika komponentu są oddzielone.
Komponent z Inline Template:
- Cała struktura HTML komponentu znajduje się bezpośrednio w dekoratorze
@Component
w pliku klasy, zazwyczaj w właściwościtemplate
. - Umożliwia szybkie tworzenie mniejszych, bardziej zrozumiałych komponentów, które nie mają zbyt skomplikowanego HTML.
- Może ułatwić zarządzanie małymi komponentami, gdyż nie musisz przełączać się między plikami podczas edycji.
Przykład Komponentu z Inline Template
Aby wygenerować komponent z użyciem inline template przy pomocy Angular CLI, możesz użyć polecenia:
ng generate component my-inline-component --inlineTemplate
lub w skróconej formie:
ng g c my-inline-component -t
To spowoduje utworzenie komponentu, w którym definicja HTML jest umieszczona bezpośrednio w dekoratorze @Component
:
import { Component } from '@angular/core';
@Component({
selector: 'app-my-inline-component',
standalone: true,
imports: [],
template: `
<p>
my-inline-component works!
</p>
`,
styleUrl: './my-inline-component.component.css'
})
export class MyInlineComponentComponent {
}
W powyższym przykładzie, zamiast odwoływać się do zewnętrznego pliku .html
, użyliśmy właściwości template
w dekoratorze @Component
do bezpośredniego określenia szablonu HTML. Szablon jest prosty – zawiera tylko jedną linijkę HTML, co czyni go idealnym kandydatem do inline template.