Jeśli tworzysz aplikację Angular z wieloma stronami, musisz użyć routingu, aby nawigować między nimi. Możesz to zrobić, tworząc listę tras ze ścieżką dla każdej strony w module routingu.
Następnie możesz kierować do innych stron w pliku HTML, używając tagu kotwicy. Możesz także kierować do innych stron w pliku TypeScript, używając metody router.navigate().
Jak stworzyć nową stronę w aplikacji Angular
Najpierw utwórz nową aplikację Angular. Możesz także użyć już istniejącego. Jeśli nie wiesz, jak stworzyć nową aplikację Angular, możesz dowiedzieć się o niej wraz z innymi wstępne pojęcia stosowane w Angular.
-
Utwórz nowy komponent w swojej aplikacji Angular używając ng wygeneruj komponent Komenda:
ng wygeneruj dom komponentu - Otworzyć src/app/home/home.component.html pliku i zastąp bieżącą zawartość nową zawartością.
<klasa div="zawartość">
<h2> Dom </h2>
<p>
Jestem fotografem zajmującym się fotografią ślubną. Sprawdź moje projekty!
</p>
<klasa div="karta">
<h4> Jan & Amy </h4>
<p> Góry Błękitne, Australia </p>
</div>
<klasa div="karta">
<h4> Ross & Rach </h4>
<p> Ogrody Hunter Valley, Australia </p>
</div>
</div> - Wypełnij src/app/home/home.component.css plik ze stylami dla treści HTML.
.zawartość {
Wysokość linii: 2Rem;
rozmiar czcionki: 1.2em;
}.karta {
cień pudełka: 0 4px 8px 0 RGB(0, 0, 0, 0.2);
szerokość: 400px;
wyściółka: 16px;
margines: 24px 0px;
kolor tła: biały dym;
rodzina czcionek: bezszeryfowy;
} - Utwórz kolejny komponent za pomocą ng wygeneruj komponent polecenie w terminalu. Będziesz używać nowego komponentu jako strony z informacjami.
ng wygeneruj komponent o - Otworzyć src/app/about/about.component.html pliku i zastąp bieżącą zawartość nową zawartością.
<klasa div="zawartość">
<h2> O mnie </h2>
<p>
I'm John, uwielbiam robić zdjęcia. Fotografuję od ponad 25 lat. Odwiedź mnie w moich mediach społecznościowych:
</p>
<a href=""> Facebook </a><br>
<a href=""> LinkedIn </a><br>
<a href=""> Instagram </a><br>
</div> - Wypełnij src/app/about/about.component.css plik ze stylami dla treści HTML.
.zawartość {
Wysokość linii: 2Rem;
rozmiar czcionki: 1.2em;
}
Jak poruszać się między dwiema stronami
Możesz użyć routingu, aby przejść z jednej strony na drugą. Możesz to skonfigurować w pliku routingu. Ten przykład będzie miał jeden plik routingu dla całej aplikacji, zlokalizowany w src/app/app-routing.module.ts.
- Jeśli Twoja aplikacja nie ma jeszcze pliku modułu routingu aplikacji, możesz go wygenerować za pomocą ng generuje moduł Komenda. W wierszu poleceń lub terminalu przejdź do folderu głównego aplikacji i uruchom następujące polecenie:
ng wygeneruj moduł app-routing --module app --flat - Spowoduje to utworzenie pliku app-routing.module.ts w twoim źródło/aplikacja teczka.
- W górnej części pliku dodaj dodatkowe importy komponentów Home i About. Upewnij się, że importujesz również moduły RouterModule i CommonModule; ostatecznie Twoje instrukcje importu powinny wyglądać tak:
import { Wspólny moduł } z „@kątowe/wspólne”;
import { Trasy, moduł routera } z „@kątowy/router”;
import { Komponent główny } z './home/home.komponent';
import { O komponencie } z './o/o.komponentu'; - Pod importami dodaj nową tablicę tras, aby przechowywać ścieżki, których będziesz używać podczas routingu do każdej strony.
stały trasy: Trasy = [
{ ścieżka: '', składnik: Komponent Home },
{ ścieżka: 'o', składnik: O komponencie }
]; - Zastąp blok NgModule następującym, co dodaje RouterModule do tablicy importów i eksportów.
@NgModule({
deklaracje: [],
import: [
Moduł wspólny,
RouterModule.forRoot (trasy)
],
eksporty: [Moduł Routera]
}) - w src/app/app.component.html pliku, usuń bieżącą zawartość i dodaj znacznik router-outlet.
<klasa div="pojemnik">
<gniazdo routera></router-outlet>
</div>
Jak przejść do nowej strony w pliku HTML
Aby przejść do strony w pliku HTML, użyj tagu kotwicy. W atrybucie href dodaj ścieżkę określoną w tablicy route.
- w src/app/app.component.html pliku, dodaj dwa znaczniki kotwicy przed tagiem div kontenera. Umożliwi to nawigację między stronami głównymi i informacjami.
<klasa div="pasek nawigacyjny">
<klasa="połączyć" href="">Dom</a>
<klasa="połączyć" href="/about">O</a>
</div> - Dodaj trochę stylizacji do src/app/app.component.css plik.
.pojemnik {
margines: 48px 35%;
rodzina czcionek: &cytuję;Arial&cytuję;, bezszeryfowy;
wyświetlacz: przewód;
kierunek ugięcia: kolumna;
wyrównaj-elementy: środek;
}.pasek nawigacyjny {
kolor tła: ciemnoszary;
wyściółka: 30px 50px;
wyświetlacz: przewód;
wyrównaj-elementy: środek;
rodzina czcionek: bezszeryfowy;
}.połączyć:pierwszy w rodzaju {
margines w prawo: 32px;
}.połączyć {
kolor: biały;
tekst-dekoracja: Żaden;
rozmiar czcionki: 14pt;
grubość czcionki: pogrubienie;
} - Dodaj stylizację do ogólnego marginesu strony w src/style.css.
ciało {
margines: 0;
wyściółka: 0;
} - W wierszu polecenia lub terminalu przejdź do folderu głównego aplikacji Angular. Uruchom aplikację za pomocą ng służyć i poczekaj, aż zakończy się kompilacja.
ng służyć - W przeglądarce wpisz localhostURL w pasku adresu URL, aby wyświetlić swoją aplikację. Domyślnie jest to zwykle http://localhost: 4200/.
- Twoja witryna zostanie załadowana na stronę główną.
- Możesz przejść do strony Informacje, klikając łącze Informacje na pasku nawigacyjnym.
Jak przejść do nowej strony w pliku TypeScript
Jak dotąd to demo używa standardowych linków HTML, aby zapewnić nawigację. Aby nawigować za pomocą pliku TypeScript zamiast pliku HTML, możesz użyć router.nawiguj().
- w src/app/app.component.html pliku, usuń znaczniki kotwicy i zastąp je znacznikami przycisków. Te przyciski będą miały zdarzenie kliknięcia, które wyzwala funkcję o nazwie clickButton(). Gdy wywołujesz funkcję clickButton(), dodaj ścieżkę URL jako argument.
<klasa przycisku="połączyć" (kliknij)="kliknijPrzycisk('')">Dom</button>
<klasa przycisku="połączyć" (kliknij)="kliknijPrzycisk('/about')">O</button> - Dodaj stylizację do przycisków w src/app/app.component.css plik.
przycisk {
kolor tła: czarny;
wyściółka: 4px 8px;
kursor: wskaźnik;
} - Na górze src/app/app.component.ts pliku, zaimportuj router.
import { Router } z „@kątowy/router”; - Dodaj nowy konstruktor wewnątrz klasy AppComponent i wstrzyknij router w obrębie parametrów.
konstruktor(router prywatny: router) {
} - Pod konstruktorem utwórz nową funkcję o nazwie clickButton(), która będzie przechodzić do nowej strony na podstawie podanego adresu URL.
clickButton (ścieżka: ciąg) {
ten.router.navigate([ścieżka]);
} - Uruchom ponownie polecenie ng serve w wierszu polecenia lub terminalu.
ng służyć - Przejdź do swojej witryny w przeglądarce. href jest teraz zastąpione dwoma przyciskami.
- Kliknij na O przycisk. Zostanie przekierowany na stronę Informacje.
Tworzenie wielu stron w aplikacji Angular
Za pomocą routingu można kierować między wieloma stronami w aplikacji Angular. Jeśli masz oddzielne komponenty dla każdej strony, możesz skonfigurować ścieżki dla swoich tras w module routingu.
Aby przejść do innej strony za pomocą pliku HTML, użyj tagu kotwicy z atrybutem href jako ścieżką routingu do tej strony. Aby przejść do innej strony za pomocą pliku TypeScript, możesz użyć metody router.navigate().
Jeśli tworzysz aplikację Angular, możesz użyć dyrektyw Angular. Pozwalają one na użycie dynamicznych instrukcji if, pętli for lub innych operacji logicznych w pliku HTML komponentu.
