Dacă creați o aplicație Angular cu mai multe pagini, trebuie să utilizați rutarea pentru a naviga între ele. Puteți face acest lucru creând o listă de rute cu o cale pentru fiecare pagină din modulul de rutare.
Puteți apoi să direcționați către alte pagini dintr-un fișier HTML utilizând o etichetă de ancorare. De asemenea, puteți direcționa către alte pagini dintr-un fișier TypeScript, folosind metoda router.navigate().
Cum se creează o pagină nouă într-o aplicație unghiulară
Mai întâi, creați o nouă aplicație Angular. Puteți folosi și unul existent. Dacă nu sunteți familiarizat cu cum să creați o nouă aplicație Angular, puteți afla despre ea împreună cu altele concepte introductive utilizate în Angular.
-
Creați o componentă nouă în aplicația dvs. Angular folosind ng genera componentă comanda:
ng genera componente home - Deschide src/app/home/home.component.html fișier și înlocuiți conținutul curent cu conținut nou.
<div class="conţinut">
<h2> Acasă </h2>
<p>
Sunt un fotograf care face fotografii de nuntă. Vezi proiectele mele!
</p>
<div class="card">
<h4> Ioan & Amy </h4>
<p> Blue Mountains, Australia </p>
</div>
<div class="card">
<h4> Ross & Rah </h4>
<p> Grădinile Hunter Valley, Australia </p>
</div>
</div> - Populați src/app/home/home.component.css fișier cu stil pentru conținutul HTML.
.conţinut {
inaltimea liniei: 2rem;
marimea fontului: 1.2em;
}.card {
cutie-umbră: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
lăţime: 400px;
căptușeală: 16px;
marginea: 24px 0px;
culoare de fundal: fum alb;
familie de fonturi: sans-serif;
} - Creați o altă componentă folosind ng genera componentă comanda din terminal. Veți folosi noua componentă ca pagină despre.
ng generate component about - Deschide src/app/about/about.component.html fișier și înlocuiți conținutul curent cu conținut nou.
<div class="conţinut">
<h2> Despre mine </h2>
<p>
eu'sunt John și îmi place să fac fotografii. Fac fotografii de peste 25 de ani. Vizitează-mă pe rețelele mele de socializare:
</p>
<a href=""> Facebook </A><br>
<a href=""> LinkedIn </A><br>
<a href=""> Instagram </A><br>
</div> - Populați src/app/about/about.component.css fișier cu stil pentru conținutul HTML.
.conţinut {
inaltimea liniei: 2rem;
marimea fontului: 1.2em;
}
Cum să navigați între cele două pagini
Puteți utiliza rutarea pentru a naviga de la o pagină la alta. Puteți configura acest lucru într-un fișier de rutare. Acest exemplu va avea un fișier de rutare pentru întreaga aplicație, situat în src/app/app-routing.module.ts.
- Dacă aplicația dvs. nu are deja fișierul modulului de rutare a aplicației, puteți genera unul folosind ng genera modul comanda. Într-o linie de comandă sau terminal, navigați la folderul rădăcină al aplicației și rulați următoarea comandă:
generează modulul app-routing --module app --flat - Acest lucru va crea un fișier app-routing.module.ts în fișierul dvs src/app pliant.
- În partea de sus a fișierului, adăugați importuri suplimentare pentru componentele Acasă și Despre. Asigurați-vă că importați și RouterModule și CommonModule; în cele din urmă, declarațiile dvs. de import ar trebui să arate astfel:
import { CommonModule } din „@unghiular/comun”;
import { Rute, RouterModule } din '@angular/router';
import { HomeComponent } din './home/home.component';
import { Despre componentă } din './despre/despre.componentă'; - Sub importuri, adăugați o nouă matrice de rute pentru a stoca căile pe care le veți folosi la rutarea către fiecare pagină.
const rute: Rute = [
{ cale: '', componentă: HomeComponent },
{ cale: 'despre', componentă: Despre componentă }
]; - Înlocuiți blocul NgModule cu următorul, care adaugă RouterModule la matricea de importuri și exporturi.
@NgModule({
declarații: [],
importuri: [
Modul comun,
RouterModule.forRoot (rute)
],
exporturi: [RouterModule]
}) - În src/app/app.component.html fișier, eliminați conținutul curent și adăugați eticheta router-outlet.
<div class="recipient">
<router-priză></router-outlet>
</div>
Cum să navigați la noua pagină într-un fișier HTML
Pentru a naviga la o pagină dintr-un fișier HTML, utilizați eticheta de ancorare. În atributul href, adăugați calea pe care ați specificat-o în matricea rute.
- În src/app/app.component.html fișier, adăugați două etichete de ancorare înainte de container div. Acest lucru vă va permite să navigați între paginile Acasă și Despre.
<div class="bara de navigare">
<o clasă="legătură" href="">Acasă</A>
<o clasă="legătură" href="/about">Despre</A>
</div> - Adăugați un pic de stil src/app/app.component.css fişier.
.container {
marginea: 48px 35%;
familie de fonturi: "Arial", sans-serif;
afişa: contracta;
flex-direcție: coloană;
alinierea elementelor: centru;
}.navbar {
culoare de fundal: gri închis ardezie;
căptușeală: 30px 50px;
afişa: contracta;
alinierea elementelor: centru;
familie de fonturi: sans-serif;
}.legătură:primul de tip {
margine-dreapta: 32px;
}.legătură {
culoare: alb;
text-decor: nici unul;
marimea fontului: 14pct;
grosimea fontului: îndrăzneţ;
} - Adăugați ceva stil la marginea generală a paginii în src/styles.css.
corp {
marginea: 0;
căptușeală: 0;
} - Într-un prompt de comandă sau un terminal, navigați la folderul rădăcină al aplicației Angular. Rulați aplicația folosind ng servi comandă și așteptați să se termine compilarea.
ng servi - Într-un browser, tastați localhostURL în bara de adrese URL pentru a vedea aplicația. În mod implicit, acesta este de obicei http://localhost: 4200/.
- Site-ul dvs. se va încărca pe pagina de pornire.
- Puteți naviga la pagina Despre făcând clic pe linkul Despre din bara de navigare.
Cum să navigați la noua pagină într-un fișier TypeScript
Până acum, această demonstrație folosește link-uri HTML standard pentru a oferi navigare. Pentru a naviga folosind fișierul TypeScript în loc de fișierul HTML, puteți utiliza router.navigate().
- În src/app/app.component.html fișier, eliminați etichetele de ancorare și înlocuiți-le cu etichete de buton. Aceste butoane vor avea un eveniment click care declanșează o funcție numită clickButton(). Când apelați funcția clickButton(), adăugați calea rutei URL ca argument.
<clasa de buton="legătură" (click)="clickButton('')">Acasă</button>
<clasa de buton="legătură" (click)="clickButton('/about')">Despre</button> - Adăugați un pic de stil la butoanele din src/app/app.component.css fişier.
buton {
culoare de fundal: negru;
căptușeală: 4px 8px;
cursor: indicator;
} - În partea de sus a src/app/app.component.ts fișier, importați routerul.
import { Router } din '@angular/router'; - Adăugați un nou constructor în clasa AppComponent și injectați routerul în parametri.
constructor(router privat: router) {
} - Sub constructor, creați o nouă funcție numită clickButton(), care va naviga la noua pagină pe baza adresei URL pe care o transmiteți.
clickButton (cale: șir) {
acest.router.navigate([cale]);
} - Reluați comanda ng serve în promptul de comandă sau în terminal.
ng servi - Navigați la site-ul dvs. într-un browser. href este acum înlocuit cu două butoane.
- Faceți clic pe Despre buton. Acesta va fi direcționat către pagina Despre.
Crearea mai multor pagini într-o aplicație unghiulară
Puteți ruta între mai multe pagini dintr-o aplicație Angular utilizând rutarea. Dacă aveți componente separate pentru fiecare pagină, puteți configura căile pentru rutele dvs. în modulul de rutare.
Pentru a naviga la o altă pagină printr-un fișier HTML, utilizați o etichetă de ancorare cu atributul href ca cale de rutare către pagina respectivă. Pentru a naviga la o altă pagină printr-un fișier TypeScript, puteți utiliza metoda router.navigate().
Dacă construiți o aplicație Angular, puteți utiliza directivele Angular. Acestea vă permit să utilizați instrucțiuni dinamice if, bucle for sau alte operații logice în fișierul HTML al unei componente.
