Komponent jest jednym z najważniejszych elementów konstrukcyjnych aplikacji Angular. Komponenty to fragmenty kodu wielokrotnego użytku, które tworzą określone sekcje Twojej witryny.
Przykłady komponentów, które możesz utworzyć, obejmują mniejsze elementy interfejsu użytkownika, takie jak przyciski lub karty. Mogą również zawierać większe elementy interfejsu użytkownika, takie jak paski boczne, paski nawigacyjne lub całe strony.
Używanie komponentów w Angular
Kiedy tworzysz komponenty w aplikacji Angular, możesz ich używać w innych komponentach. Na przykład możesz utworzyć komponent dla dużego elementu karty interfejsu użytkownika. Następnie możesz użyć tego komponentu jako zwykłego tagu HTML, gdziekolwiek chcesz:
<app-nowy-komponent></app-new-component>Ponieważ komponenty są fragmentami kodu, które można ponownie wykorzystać, można również przekazywać zmienne, aby dane dla każdej instancji były inne. Możesz także tworzyć komponenty dla stron i odpowiednio do nich kierować, używając app-routing.module.ts plik.
Możesz zaprojektować swoje komponenty na podstawie struktury aplikacji i tego, jak bardzo chcesz oddzielić swoją funkcjonalność.
Jak stworzyć komponent
Możesz użyć ngwygeneruj polecenie aby stworzyć nowy komponent.
- Stwórz nowy Aplikacja kątowa za pomocą nowy lub otwórz istniejący.
- Otwórz wiersz polecenia lub terminal. Alternatywnie, jeśli masz otwartą aplikację Angular w IDE, takie jak Visual Studio Code, możesz skorzystać z wbudowanego terminala.
- W terminalu przejdź do lokalizacji folderu głównego projektu. Na przykład:
płyta CD C:\Użytkownicy\Sharl\Desktop\Aplikacja kątowa - Uruchom ng wygeneruj komponent polecenie, a następnie nazwa nowego komponentu:
ng generuj komponentową kartę ui - Nowy komponent zostanie utworzony w nowym folderze, wewnątrz źródło/aplikacja informator.
Jak dodać zawartość do komponentu kątowego
Angular tworzy każdy składnik za pomocą pliku HTML, CSS, TypeScript i Testing Specification.
- The plik HTML przechowuje zawartość HTML składnika.
- The Plik CSS przechowuje stylizację komponentu.
- The Plik specyfikacji testowej (spec.ts) przechowuje wszelkie testy jednostkowe dla składnika.
- The Plik TypeScript przechowuje logikę i funkcjonalność definiującą komponent.
Dodaj zawartość do niestandardowego komponentu karty interfejsu użytkownika.
- otwarty src/app/ui-card/ui-card.component.htmli zaktualizuj kod HTML składnika. Upewnij się, że masz obraz o tej samej nazwie w folderze o nazwie źródła/zasoby/obrazy w Twojej aplikacji Angular. Zastąp zawartość ui-card.component.html z następującymi:
<klasa div="karta">
<img src="./assets/images/blue-mountains.jpg" alt="Awatara">
<klasa div="pojemnik">
<h4 klasa="tytuł"> Niebieskie góry </h4>
<p> NSW, Australia </p>
</div>
</div> - otwarty ui-card.component.cssi dodaj zawartość CSS do komponentu:
.karta {
cień pudełka: 0 4px 8px 0 RGB(0, 0, 0, 0.2);
szerokość: 400px;
wyściółka: 8px;
margines: 24px;
kolor tła: biały dym;
rodzina czcionek: bezszeryfowy;
}.kartaobrazek {
maksymalna szerokość: 400px;
}.tytuł {
wyściółka-góra: 16px;
}.pojemnik {
wyściółka: 2px 16px;
} - The ui-card.component.ts plik zawiera już klasę dla nowego komponentu, w której można dodać nowe funkcje, logikę i funkcjonalność. To powinno wyglądać tak:
eksportklasa Komponent UiCard przybory OnInit {
konstruktor() { }
ngOnInit(): próżnia {
// Dodaj tutaj trochę logiki kodu
}
// Lub dodaj swoją logikę i funkcjonalność w nowych funkcjach
}
Jak używać komponentu w kodzie HTML innego komponentu?
W środku ui-card.component.ts, istnieją trzy atrybuty: selektor, templateUrl i styleUrl. TemplateUrl odwołuje się do kodu HTML komponentu (a zatem łączy do pliku HTML). Atrybut styleUrls odnosi się do CSS komponentu i łączy do pliku CSS.
@Składnik({
selektor: 'app-ui-card',
templateUrl: './ui-card.component.html',
styleUrls: ['./ui-card.component.css']
})Gdy użyjesz komponentu Karta interfejsu użytkownika w innym komponencie, użyjesz nazwy selektora „app-ui-card”.
- Najpierw dodaj trochę treści do swojej strony internetowej. otwarty src/app/app.component.html i dodaj pasek nawigacyjny:
<klasa div="navbar-header">
<klasa="tytuł-nawigacji"><b> Internetowy pasek nawigacyjny </b></a>
</div> - Dodaj stylizację do paska nawigacyjnego w src/app/app.component.css:
.navbar-header {
kolor tła: #07393C;
wyściółka: 30px 50px;
wyświetlacz: przewód;
wyrównaj-elementy: środek;
rodzina czcionek: bezszeryfowy;
}.nav-tytuł {
tekst-dekoracja: Żaden;
kolor: biały;
rozmiar czcionki: 16pt;
} - Pod paskiem nawigacyjnym w app.component.html, dodaj nową kartę interfejsu użytkownika. Użyj nazwy selektora „app-ui-card” jako tagu HTML:
<aplikacja-ui-karta></app-ui-card> - Możesz również ponownie użyć komponentu, dołączając tag wielokrotnie. Aby to zrobić, zastąp powyższy wiersz, aby zamiast tego użyć wielu tagów HTML app-ui-card:
<styl div="wyświetlacz: elastyczny">
<aplikacja-ui-karta></app-ui-card>
<aplikacja-ui-karta></app-ui-card>
<aplikacja-ui-karta></app-ui-card>
</div> - Uruchom aplikację Angular z terminala za pomocą ng służyć i otwórz swoją witrynę w przeglądarce internetowej.
Jak przekazać parametry wejściowe do komponentu?
Ponieważ komponent jest wielokrotnego użytku, istnieją atrybuty, które możesz chcieć zmienić za każdym razem, gdy go używasz. W takim przypadku możesz użyć parametrów wejściowych.
- Dodać Wejście do listy importów na górze ui-card.component.ts:
import { Komponent, Wejście, OnInit } z '@kątowy/core'; - Następnie dodaj dwie zmienne wejściowe wewnątrz Komponent UICard klasa. Umożliwią one zmianę nazwy lokalizacji i obrazu wyświetlanego na karcie. Wypełnij ngOnInit jak pokazano, aby zbudować ścieżkę do obrazu lub użyć wartości domyślnej:
eksportklasa Komponent UiCard przybory OnInit {
@Wejście() Nazwa lokalizacji: strunowy;
@Wejście() nazwa obrazu: strunowy;konstruktor() { }
ngOnInit(): próżnia {
jeśli (ten.nazwa obrazu) {
ten.imageName = "./assets/images/" + ten.nazwa obrazu;
} w przeciwnym razie {
ten.imageName = "./assets/images/blue-mountains.jpg";
}
}
} - W ui-card.component.html, zmień zakodowaną na stałe wartość nagłówka 4 „Góry Błękitne”, aby zamiast tego używać zmiennej wejściowej „locationName”. Zmień także zakodowane na stałe src atrybut w tagu obrazu, aby użyć zmiennej wejściowej „imageName”:
<klasa div="karta">
<img src="{{imageName}}" alt="Awatara">
<klasa div="pojemnik">
<h4 klasa="tytuł">{{Nazwa lokalizacji? Nazwa lokalizacji: 'Niebieskie góry'}}</h4>
<p>NSW, Australia</p>
</div>
</div> - W app.component.html, zmodyfikuj tagi „app-ui-card”, aby uwzględnić dane wejściowe „locationName” i „imageName”. Dla każdego elementu karty interfejsu użytkownika wprowadź inną wartość. Upewnij się, że pliki obrazów znajdują się w folderze asset/images Twojej aplikacji Angular.
<styl div="wyświetlacz: elastyczny">
<app-ui-card [nazwa_lokalizacji]="'Niebieskie góry'" [nazwa obrazu]="'niebieskie-góry.jpg'"></app-ui-card>
<app-ui-card [nazwa_lokalizacji]="'Sydnej'" [nazwa obrazu]="'sydney.jpg'"></app-ui-card>
<app-ui-card [nazwa_lokalizacji]="'Newcastle'" [nazwa obrazu]="'nowyzamek.jpg'"></app-ui-card>
</div> - Uruchom aplikację Angular z terminala za pomocą ng służyć i otwórz swoją witrynę w przeglądarce internetowej.
W tym momencie może pojawić się błąd dotyczący tego, że te właściwości nie mają inicjatora. Jeśli tak, po prostu dodaj lub ustaw "strictPropertyInitialization": fałsz w Twoim tsconfig.json.
Jak kierować do nowego komponentu
Jeśli Twój komponent reprezentuje dużą część Twojej witryny, na przykład nową stronę, możesz również kierować do tego komponentu.
- otwarty app-routing.module.ts. Zaimportuj składnik karty interfejsu użytkownika na górze pliku:
import { Komponent UiCard } z './karta-ui/komponent-karty-ui'; - Dodaj ścieżkę routingu do tablicy tras:
stały trasy: Trasy = [
//... Wszelkie inne trasy, których możesz potrzebować ...
{ ścieżka: 'uicard', składnik: UiCardComponent },
] - Zastąp całą obecną zawartość w app.component.html zawierać tylko pasek nawigacyjny i tag HTML routera. Router-outlet umożliwia routing między stronami. Dodaj hiperłącze do paska nawigacyjnego z atrybutem href odpowiadającym ścieżce w tablicy route:
<klasa div="navbar-header">
<klasa="tytuł-nawigacji"><b> Internetowy pasek nawigacyjny </b></a>
<klasa="nav-a-link" href="/uicard"><b> Karta interfejsu użytkownika </b></a>
</div>
<gniazdo routera></router-outlet> - Dodaj stylizację do nowego łącza karty interfejsu użytkownika, w app.komponent.css:
.nav-a-link {
tekst-dekoracja: Żaden;
kolor: #4b6569;
rozmiar czcionki: 14pt;
margines-lewy: 60px;
grubość czcionki: zapalniczka;
} - Uruchom aplikację Angular z terminala za pomocą ng służyć i otwórz swoją witrynę w przeglądarce internetowej. Link pojawi się na pasku nawigacyjnym na stronie internetowej.
- Zanotuj adres URL w przeglądarce internetowej. Domyślnie jest to zwykle http://localhost: 4200/. Po kliknięciu łącza karty interfejsu użytkownika strona zostanie przekierowana do http://localhost: 4200/uicardi pojawi się karta interfejsu użytkownika.
Tworzenie komponentów w Angular
Komponent jest jednym z głównych elementów konstrukcyjnych Angulara. Komponenty pozwalają podzielić różne sekcje witryny na mniejsze części, które można ponownie wykorzystać. Możesz przekształcić wszystko w komponenty, w tym mniejsze przyciski, karty, większe paski boczne i paski nawigacyjne.
Możesz również użyć zmiennych wejściowych do przekazywania danych między różnymi instancjami składnika. I możesz kierować do komponentu za pomocą ścieżek URL.
Jeśli tworzysz nową aplikację Angular, może być konieczne zbudowanie paska nawigacyjnego, aby użytkownicy mogli poruszać się po Twoich komponentach. Posiadanie responsywnego paska nawigacyjnego pozwala wyświetlać go na różnych urządzeniach, na różnych rozmiarach ekranu.
