Als u een Angular-toepassing met meerdere pagina's maakt, moet u routering gebruiken om tussen de pagina's te navigeren. U kunt dit doen door een lijst met routes te maken met een pad voor elke pagina in de routeringsmodule.
U kunt vervolgens naar andere pagina's in een HTML-bestand routeren met behulp van een ankertag. U kunt ook naar andere pagina's in een TypeScript-bestand routeren met behulp van de router.navigate()-methode.
Een nieuwe pagina maken in een hoekige toepassing
Maak eerst een nieuwe Angular-toepassing. U kunt ook een bestaande gebruiken. Als u niet bekend bent met het maken van een nieuwe Angular-app, kunt u er samen met andere over leren inleidende concepten gebruikt in Angular.
-
Maak een nieuwe component in uw Angular-app de... gebruiken ng component genereren opdracht:
ng component home genereren - Open de src/app/home/home.component.html bestand en vervang de huidige inhoud door nieuwe inhoud.
<div klasse="inhoud">
<h2> Huis </h2>
<p>
Ik ben een fotograaf die trouwfotografie doet. Bekijk mijn projecten!
</p>
<div klasse="kaart">
<h4> John & Amy </h4>
<p> Blue Mountains, Australië </p>
</div>
<div klasse="kaart">
<h4> Ross & Rachel </h4>
<p> Hunter Valley Gardens, Australië </p>
</div>
</div> - Bevolken de src/app/home/home.component.css bestand met opmaak voor de HTML-inhoud.
.inhoud {
lijnhoogte: 2rem;
lettertypegrootte: 1.2em;
}.kaart {
doos-schaduw: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
breedte: 400px;
opvulling: 16px;
marge: 24px 0px;
Achtergrond kleur: witte rook;
font-familie: schreefloos;
} - Maak een ander onderdeel met behulp van de ng component genereren commando in de terminal. U gebruikt de nieuwe component als een over-pagina.
ng component genereren over - Open de src/app/about/about.component.html bestand en vervang de huidige inhoud door nieuwe inhoud.
<div klasse="inhoud">
<h2> Over mij </h2>
<p>
l'm John, en ik ben dol op foto's maken. Ik maak al meer dan 25 jaar foto's. Bezoek mij op mijn sociale media:
</p>
<een href=""> Facebook </a><br>
<een href=""> LinkedIn </a><br>
<een href=""> Instagram </a><br>
</div> - Bevolken de src/app/about/about.component.css bestand met opmaak voor de HTML-inhoud.
.inhoud {
lijnhoogte: 2rem;
lettertypegrootte: 1.2em;
}
Navigeren tussen de twee pagina's
U kunt routing gebruiken om van de ene pagina naar de andere te navigeren. U kunt dit configureren in een routeringsbestand. Dit voorbeeld heeft één routeringsbestand voor de hele app, te vinden in src/app/app-routing.module.ts.
- Als uw app het app-routing-modulebestand nog niet heeft, kunt u er een genereren met de ng module genereren opdracht. Navigeer in een opdrachtregel of terminal naar de hoofdmap van de toepassing en voer de volgende opdracht uit:
ng module app-routing genereren --module app --flat - Dit maakt een app-routing.module.ts-bestand aan in uw src/app map.
- Voeg boven aan het bestand aanvullende importen toe voor de onderdelen Start en Over. Zorg ervoor dat u ook RouterModule en CommonModule importeert; uiteindelijk zouden uw importverklaringen er als volgt uit moeten zien:
importeren { CommonModule } van '@hoekig/algemeen';
importeren { Routes, RouterModule } van '@hoekig/router';
importeren { ThuisComponent } van './home/home.component';
importeren { OverComponent } van './over/over.component'; - Voeg onder de imports een nieuwe routesarray toe om de paden op te slaan die u zult gebruiken bij het routeren naar elke pagina.
const routes: routes = [
{ pad: '', onderdeel: ThuisComponent },
{ pad: 'over', onderdeel: OverComponent }
]; - Vervang het NgModule-blok door het volgende, waarmee de RouterModule wordt toegevoegd aan de import- en exportarray.
@NgModule({
aangiften: [],
invoer: [
gemeenschappelijke module,
RouterModule.forRoot (routes)
],
exporteert: [RouterModule]
}) - In de src/app/app.component.html bestand, verwijder de huidige inhoud en voeg de router-outlet-tag toe.
<div klasse="container">
<router-uitgang></router-outlet>
</div>
Navigeren naar de nieuwe pagina in een HTML-bestand
Gebruik de ankertag om naar een pagina in een HTML-bestand te navigeren. Voeg in het href-attribuut het pad toe dat u hebt opgegeven in de routes-array.
- In de src/app/app.component.html bestand, voeg twee ankertags toe vóór de container div. Hiermee kunt u navigeren tussen de Home- en About-pagina's.
<div klasse="navigatiebalk">
<een klas ="koppeling" href="">Huis</a>
<een klas ="koppeling" href="/about">Over</a>
</div> - Voeg wat styling toe aan de src/app/app.component.css het dossier.
.container {
marge: 48px 35%;
font-familie: &aanhalingsteken;Arial&aanhalingsteken;, schreefloos;
Scherm: buigen;
flex-richting: kolom;
align-items: centrum;
}.navbar {
Achtergrond kleur: donkerleigrijs;
opvulling: 30px 50px;
Scherm: buigen;
align-items: centrum;
font-familie: schreefloos;
}.koppeling:eerste-van-type {
marge-rechts: 32px;
}.koppeling {
kleur: wit;
tekst-decoratie: geen;
lettertypegrootte: 14pt;
lettertype dikte: vetgedrukt;
} - Voeg wat opmaak toe aan de algemene paginamarge in src/styles.css.
lichaam {
marge: 0;
opvulling: 0;
} - Navigeer in een opdrachtprompt of terminal naar de hoofdmap van de Angular-toepassing. Voer de applicatie uit met behulp van de ng serveren commando, en wacht tot het klaar is met compileren.
ng serveren - Typ in een browser de localhostURL in de URL-balk om uw toepassing te bekijken. Standaard is dit meestal http://localhost: 4200/.
- Uw website wordt geladen op de startpagina.
- U kunt naar de pagina Over navigeren door op de koppeling Over in de navigatiebalk te klikken.
Navigeren naar de nieuwe pagina in een typeScript-bestand
Tot nu toe gebruikt deze demo standaard HTML-links om te navigeren. Om te navigeren met het TypeScript-bestand in plaats van het HTML-bestand, kunt u router.navigatie().
- In de src/app/app.component.html bestand, verwijder de ankertags en vervang ze door knoptags. Deze knoppen hebben een click-gebeurtenis die een functie activeert met de naam clickButton(). Wanneer u de functie clickButton() aanroept, voegt u het URL-routepad als argument toe.
<knop klasse="koppeling" (klik)="klikKnop('')">Huis</button>
<knop klasse="koppeling" (klik)="klikKnop('/about')">Over</button> - Voeg wat styling toe aan de knoppen in de src/app/app.component.css het dossier.
knop {
Achtergrond kleur: zwart;
opvulling: 4px 8px;
cursor: wijzer;
} - Op de top van de src/app/app.component.ts bestand, importeer de router.
importeren { Router } van '@hoekig/router'; - Voeg een nieuwe constructor toe binnen de AppComponent-klasse en injecteer de router binnen de parameters.
constructeur(privérouter: router) {
} - Maak onder de constructor een nieuwe functie met de naam clickButton(), die naar de nieuwe pagina navigeert op basis van de URL die u doorgeeft.
clickButton (pad: string) {
deze.router.navigeren([pad]);
} - Voer de opdracht ng serve opnieuw uit in de opdrachtprompt of terminal.
ng serveren - Navigeer naar uw website in een browser. De href is nu vervangen door twee knoppen.
- Klik op de Over knop. Het wordt doorgestuurd naar de pagina Over.
Meerdere pagina's maken in een hoekige toepassing
U kunt tussen meerdere pagina's binnen een Angular-toepassing routeren met behulp van routering. Als u voor elke pagina aparte componenten heeft, kunt u binnen de routeringsmodule paden voor uw routes configureren.
Om via een HTML-bestand naar een andere pagina te navigeren, gebruikt u een ankertag met het href-attribuut als het routeringspad naar die pagina. Om via een TypeScript-bestand naar een andere pagina te navigeren, kunt u de router.navigate()-methode gebruiken.
Als u een Angular-toepassing bouwt, kunt u Angular-richtlijnen gebruiken. Hiermee kunt u dynamische if-statements, for-loops of andere logische bewerkingen gebruiken binnen het HTML-bestand van een component.
