Pokud vytváříte aplikaci Angular s více stránkami, musíte k navigaci mezi nimi použít směrování. Můžete to provést vytvořením seznamu tras s cestou pro každou stránku v modulu směrování.
Poté můžete směrovat na jiné stránky v souboru HTML pomocí značky ukotvení. Můžete také směrovat na jiné stránky v souboru TypeScript pomocí metody router.navigate().
Jak vytvořit novou stránku v Angular aplikaci
Nejprve vytvořte novou aplikaci Angular. Můžete také použít stávající. Pokud nevíte, jak vytvořit novou aplikaci Angular, můžete se o ní dozvědět spolu s dalšími úvodní koncepty používané v Angular.
-
Vytvořte novou komponentu ve své aplikaci Angular za použití ng generovat komponentu příkaz:
vygenerujte domovskou komponentu - Otevři src/app/home/home.component.html soubor a nahradit aktuální obsah novým obsahem.
<třída div="obsah">
<h2> Domov </h2>
<p>
Jsem fotograf, který se zabývá fotografováním svateb. Podívejte se na mé projekty!
</str>
<třída div="Kartu">
<h4> John & Amy </h4>
<p> Modré hory, Austrálie </str>
</div>
<třída div="Kartu">
<h4> Ross & Rach </h4>
<p> Hunter Valley Gardens, Austrálie </str>
</div>
</div> - Zalidněte src/app/home/home.component.css soubor se stylem obsahu HTML.
.obsah {
výška čáry: 2rem;
velikost písma: 10,2 em;
}.Kartu {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
šířka: 400px;
vycpávka: 16px;
okraj: 24px 0px;
barva pozadí: bílý kouř;
rodina písem: sans-serif;
} - Vytvořte další komponentu pomocí ng generovat komponentu příkaz v terminálu. Novou komponentu použijete jako stránku o programu.
ng generovat součást o - Otevři src/app/about/about.component.html soubor a nahradit aktuální obsah novým obsahem.
<třída div="obsah">
<h2> O mně </h2>
<p>
já'm John a rád fotím. Fotím už přes 25 let. Navštivte mě na mých sociálních sítích:
</str>
<a href=""> Facebook </A><br>
<a href=""> LinkedIn </A><br>
<a href=""> Instagram </A><br>
</div> - Zalidněte src/app/about/about.component.css soubor se stylem obsahu HTML.
.obsah {
výška čáry: 2rem;
velikost písma: 10,2 em;
}
Jak se pohybovat mezi dvěma stránkami
K navigaci z jedné stránky na druhou můžete použít směrování. Můžete to nakonfigurovat v souboru směrování. Tento příklad bude mít jeden směrovací soubor pro celou aplikaci umístěný v src/app/app-routing.module.ts.
- Pokud vaše aplikace ještě nemá soubor modulu směrování aplikace, můžete jej vygenerovat pomocí generovat modul příkaz. V příkazovém řádku nebo terminálu přejděte do kořenové složky aplikace a spusťte následující příkaz:
generovat modul app-routing --module app --flat - Tím se ve vašem vytvoří soubor app-routing.module.ts src/aplikace složku.
- V horní části souboru přidejte další importy pro komponenty Home a About. Ujistěte se, že importujete také RouterModule a CommonModule; vaše importní příkazy by nakonec měly vypadat takto:
import { CommonModule } z '@angular/common';
import { Routes, RouterModule } z '@angular/router';
import { HomeComponent } z './home/home.component';
import { AboutComponent } z './about/about.component'; - Pod importy přidejte nové pole tras pro uložení cest, které použijete při směrování na každou stránku.
konst trasy: Trasy = [
{ cesta: '', komponent: HomeComponent },
{ cesta: 'o', komponent: AboutComponent }
]; - Nahraďte blok NgModule následujícím, který přidá RouterModule do pole importů a exportů.
@NgModule({
prohlášení: [],
dovoz: [
CommonModule,
RouterModule.forRoot (trasy)
],
exporty: [RouterModule]
}) - V src/app/app.component.html soubor, odstraňte aktuální obsah a přidejte značku router-outlet.
<třída div="kontejner">
<router-outlet></router-outlet>
</div>
Jak přejít na novou stránku v souboru HTML
Chcete-li přejít na stránku v souboru HTML, použijte značku ukotvení. Do atributu href přidejte cestu, kterou jste zadali v poli routes.
- V src/app/app.component.html soubor, přidejte dva kotevní tagy před kontejner div. To vám umožní procházet mezi stránkami Home a About.
<třída div="navigační lišta">
<třída ="odkaz" href="">Domov</A>
<třída ="odkaz" href="/about">O</A>
</div> - Přidejte trochu stylingu src/app/app.component.css soubor.
.kontejner {
okraj: 48px 35%;
rodina písem: "Arial", sans-serif;
Zobrazit: flex;
flex-direction: sloupec;
zarovnat-položky: centrum;
}.navigační lišta {
barva pozadí: darkslategrey;
vycpávka: 30px 50px;
Zobrazit: flex;
zarovnat-položky: centrum;
rodina písem: sans-serif;
}.odkaz:první typu {
okraj-pravý: 32px;
}.odkaz {
barva: bílý;
text-dekorace: žádný;
velikost písma: 14pt;
tloušťka písma: tučně;
} - Přidejte trochu stylu k celkovému okraji stránky src/styles.css.
tělo {
okraj: 0;
vycpávka: 0;
} - V příkazovém řádku nebo terminálu přejděte do kořenové složky aplikace Angular. Spusťte aplikaci pomocí ng sloužit a počkejte na dokončení kompilace.
ng sloužit - V prohlížeči zadejte localhostURL do adresního řádku pro zobrazení vaší aplikace. Ve výchozím nastavení je to obvykle http://localhost: 4200/.
- Váš web se načte na domovskou stránku.
- Na stránku O aplikaci můžete přejít kliknutím na odkaz O aplikaci v navigační liště.
Jak přejít na novou stránku v souboru TypeScript
Tato ukázka zatím používá k navigaci standardní odkazy HTML. Chcete-li navigovat pomocí souboru TypeScript namísto souboru HTML, můžete použít router.navigate().
- V src/app/app.component.html soubor, odstraňte kotevní značky a nahraďte je značkami tlačítek. Tato tlačítka budou mít událost click, která spustí funkci nazvanou clickButton(). Když zavoláte funkci clickButton(), přidejte jako argument cestu cesty URL.
<třída tlačítka="odkaz" (klik) ="klikací tlačítko ('')">Domov</button>
<třída tlačítka="odkaz" (klik) ="klikací tlačítko ('/about')">O</button> - Přidejte nějaký styl do tlačítek v src/app/app.component.css soubor.
knoflík {
barva pozadí: Černá;
vycpávka: 4px 8px;
kurzor: ukazatel;
} - V horní části src/app/app.component.ts importujte router.
import { Router } z '@angular/router'; - Přidejte nový konstruktor do třídy AppComponent a vložte směrovač v rámci parametrů.
konstruktér(soukromý router: Router) {
} - Pod konstruktorem vytvořte novou funkci nazvanou clickButton(), která bude navigovat na novou stránku na základě adresy URL, kterou předáte.
clickButton (cesta: řetězec) {
tento.router.navigate([cesta]);
} - Znovu spusťte příkaz ng serve v příkazovém řádku nebo terminálu.
ng sloužit - Přejděte na svůj web v prohlížeči. href je nyní nahrazeno dvěma tlačítky.
- Klikněte na O knoflík. Přesměruje se na stránku O aplikaci.
Vytváření více stránek v úhlové aplikaci
Můžete směrovat mezi více stránkami v rámci aplikace Angular pomocí směrování. Pokud máte pro každou stránku samostatné komponenty, můžete nakonfigurovat cesty pro své trasy v modulu směrování.
Chcete-li přejít na jinou stránku prostřednictvím souboru HTML, použijte jako směrovací cestu na tuto stránku značku ukotvení s atributem href. Chcete-li přejít na jinou stránku prostřednictvím souboru TypeScript, můžete použít metodu router.navigate().
Pokud vytváříte aplikaci Angular, můžete použít direktivy Angular. Ty umožňují používat dynamické příkazy if, smyčky for nebo jiné logické operace v rámci souboru HTML komponenty.