Ak vytvárate aplikáciu Angular s viacerými stránkami, na navigáciu medzi nimi musíte použiť smerovanie. Môžete to urobiť vytvorením zoznamu trás s cestou pre každú stránku v module smerovania.
Potom môžete smerovať na iné stránky v rámci súboru HTML pomocou značky ukotvenia. Môžete tiež smerovať na iné stránky v rámci súboru TypeScript pomocou metódy router.navigate().
Ako vytvoriť novú stránku v aplikácii Angular
Najprv vytvorte novú aplikáciu Angular. Môžete použiť aj existujúci. Ak neviete, ako vytvoriť novú aplikáciu Angular, môžete sa o nej dozvedieť spolu s ďalšími úvodné koncepty používané v Angular.
-
Vytvorte nový komponent vo svojej aplikácii Angular pomocou ng generovať komponent príkaz:
vygenerujte domov komponentu - Otvor src/app/home/home.component.html súbor a nahraďte aktuálny obsah novým obsahom.
<trieda div="obsahu">
<h2> Domov </h2>
<p>
Som fotograf, ktorý sa venuje svadobnej fotografii. Pozrite si moje projekty!
</str>
<trieda div="kartu">
<h4> John & Amy </h4>
<p> Modré hory, Austrália </str>
</div>
<trieda div="kartu">
<h4> Ross & Rach </h4>
<p> Záhrady Hunter Valley, Austrália </str>
</div>
</div> - Naplniť src/app/home/home.component.css súbor so štýlom obsahu HTML.
.obsah {
line-height: 2rem;
veľkosť písma: 1.2em;
}.karta {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
šírka: 400px;
vypchávka: 16px;
marža: 24px 0px;
farba pozadia: biely dym;
font-family: sans-serif;
} - Vytvorte ďalší komponent pomocou ng generovať komponent príkaz v termináli. Nový komponent použijete ako stránku s informáciami.
ng generovať komponent o - Otvor src/app/about/about.component.html súbor a nahraďte aktuálny obsah novým obsahom.
<trieda div="obsahu">
<h2> O mne </h2>
<p>
ja'm John a milujem fotenie. Fotografovaniu sa venujem už viac ako 25 rokov. Navštívte ma na mojich sociálnych sieťach:
</str>
<a href=""> Facebook </a><br>
<a href=""> LinkedIn </a><br>
<a href=""> Instagram </a><br>
</div> - Naplniť src/app/about/about.component.css súbor so štýlom obsahu HTML.
.obsah {
line-height: 2rem;
veľkosť písma: 1.2em;
}
Ako sa pohybovať medzi dvoma stránkami
Na navigáciu z jednej stránky na druhú môžete použiť smerovanie. Môžete to nakonfigurovať v súbore smerovania. Tento príklad bude mať jeden smerovací súbor pre celú aplikáciu umiestnený v src/app/app-routing.module.ts.
- Ak vaša aplikácia ešte nemá súbor modulu smerovania aplikácie, môžete si ho vygenerovať pomocou generovať modul príkaz. V príkazovom riadku alebo termináli prejdite do koreňového priečinka aplikácie a spustite nasledujúci príkaz:
generovať modul app-routing --module app --flat - Tým sa vo vašom vytvorí súbor app-routing.module.ts src/aplikácia priečinok.
- V hornej časti súboru pridajte ďalšie importy pre komponenty Home a About. Uistite sa, že importujete aj RouterModule a CommonModule; v konečnom dôsledku by vaše importné príkazy mali vyzerať takto:
importovať { CommonModule } od '@angular/common';
importovať { Routes, RouterModule } od '@angular/router';
importovať { HomeComponent } od './home/home.component';
importovať { AboutComponent } od './about/about.component'; - Pod importy pridajte nové pole trás na uloženie ciest, ktoré použijete pri smerovaní na každú stránku.
konšt trasy: Trasy = [
{ cesta: '', komponent: HomeComponent },
{ cesta: 'asi', komponent: AboutComponent }
]; - Nahraďte blok NgModule nasledujúcim, ktorý pridá RouterModule do poľa importov a exportov.
@NgModule({
vyhlásenia: [],
dovoz: [
CommonModule,
RouterModule.forRoot (trasy)
],
exporty: [RouterModule]
}) - V src/app/app.component.html súbor, odstráňte aktuálny obsah a pridajte značku router-outlet.
<trieda div="kontajner">
<smerovač-zásuvka></router-outlet>
</div>
Ako prejsť na novú stránku v súbore HTML
Ak chcete prejsť na stránku v rámci súboru HTML, použite značku ukotvenia. Do atribútu href pridajte cestu, ktorú ste zadali v poli routes.
- V src/app/app.component.html pridajte dve kotviace značky pred kontajner div. To vám umožní prechádzať medzi stránkami Domov a Informácie.
<trieda div="navigačná lišta">
<trieda ="odkaz" href="">Domov</a>
<trieda ="odkaz" href="/about">O</a>
</div> - Pridajte trochu štýlu src/app/app.component.css súbor.
.kontajner {
marža: 48px 35%;
font-family: "Arial", sans-serif;
displej: flex;
flex-direction: stĺpec;
align-items: centrum;
}.navigačný panel {
farba pozadia: darkslategrey;
vypchávka: 30px 50px;
displej: flex;
align-items: centrum;
font-family: sans-serif;
}.odkaz:prvého typu {
okraj-pravý: 32px;
}.odkaz {
farba: biely;
text-dekorácia: žiadny;
veľkosť písma: 14pt;
font-weight: tučný;
} - Pridajte trochu štýlu k celkovému okraju stránky src/styles.css.
telo {
marža: 0;
vypchávka: 0;
} - V príkazovom riadku alebo termináli prejdite do koreňového priečinka aplikácie Angular. Spustite aplikáciu pomocou ng slúžiť a počkajte, kým sa dokončí kompilácia.
ng slúžiť - V prehliadači zadajte localhostURL do panela s adresou URL, aby ste zobrazili svoju aplikáciu. V predvolenom nastavení je to zvyčajne http://localhost: 4200/.
- Váš web sa načíta na domovskú stránku.
- Na stránku Informácie môžete prejsť kliknutím na odkaz Informácie na navigačnom paneli.
Ako prejsť na novú stránku v súbore TypeScript
Zatiaľ táto ukážka používa na navigáciu štandardné odkazy HTML. Na navigáciu pomocou súboru TypeScript namiesto súboru HTML môžete použiť router.navigate().
- V src/app/app.component.html súbor, odstráňte kotviace štítky a nahraďte ich štítkami tlačidiel. Tieto tlačidlá budú mať udalosť kliknutia, ktorá spustí funkciu s názvom clickButton(). Keď zavoláte funkciu clickButton(), pridajte cestu URL ako argument.
<trieda tlačidiel="odkaz" (kliknutie) ="clickButton('')">Domov</button>
<trieda tlačidiel="odkaz" (kliknutie) ="clickButton('/about')">O</button> - Pridajte trochu štýlu do tlačidiel v src/app/app.component.css súbor.
tlačidlo {
farba pozadia: čierna;
vypchávka: 4px 8px;
kurzor: ukazovateľ;
} - V hornej časti src/app/app.component.ts súbor, importujte smerovač.
importovať { Router } od '@angular/router'; - Pridajte nový konštruktor do triedy AppComponent a vložte smerovač v rámci parametrov.
konštruktér(súkromný smerovač: smerovač) {
} - Pod konštruktorom vytvorte novú funkciu s názvom clickButton(), ktorá prejde na novú stránku na základe adresy URL, ktorú zadáte.
clickButton (cesta: reťazec) {
toto.router.navigate([cesta]);
} - Znova spustite príkaz ng serve v príkazovom riadku alebo termináli.
ng slúžiť - Prejdite na svoj web v prehliadači. Znak href je teraz nahradený dvoma tlačidlami.
- Klikni na O tlačidlo. Presmeruje sa na stránku Informácie.
Vytváranie viacerých stránok v uhlovej aplikácii
Pomocou smerovania môžete smerovať medzi viacerými stránkami v rámci aplikácie Angular. Ak máte samostatné komponenty pre každú stránku, môžete nakonfigurovať cesty pre svoje trasy v rámci modulu smerovania.
Ak chcete prejsť na inú stránku prostredníctvom súboru HTML, použite značku ukotvenia s atribútom href ako smerovaciu cestu na túto stránku. Ak chcete prejsť na inú stránku prostredníctvom súboru TypeScript, môžete použiť metódu router.navigate().
Ak vytvárate aplikáciu Angular, môžete použiť smernice Angular. Tie vám umožňujú používať dynamické if-príkazy, for-loops alebo iné logické operácie v rámci HTML súboru komponentu.