Om du skapar en Angular-applikation med flera sidor måste du använda routing för att navigera mellan dem. Du kan göra detta genom att skapa en lista över rutter med en sökväg för varje sida i ruttmodulen.
Du kan sedan dirigera till andra sidor i en HTML-fil genom att använda en ankartagg. Du kan också dirigera till andra sidor i en TypeScript-fil med metoden router.navigate().
Hur man skapar en ny sida i en vinkelapplikation
Skapa först en ny Angular-applikation. Du kan också använda en befintlig. Om du inte är bekant med hur du skapar en ny Angular-app kan du lära dig om den tillsammans med andra inledande begrepp som används i Angular.
-
Skapa en ny komponent i din Angular-app använda ng generera komponent kommando:
ng generera komponent hem - Öppna src/app/home/home.component.html fil och ersätt det nuvarande innehållet med nytt innehåll.
<div klass="innehåll">
<h2> Hem </h2>
<sid>
Jag är en fotograf som gör bröllopsfotografering. Kolla in mina projekt!
</s>
<div klass="kort">
<h4> John & Amy </h4 >
<sid> Blue Mountains, Australien </s>
</div>
<div klass="kort">
<h4> Ross & Rach </h4>
<sid> Hunter Valley Gardens, Australien </s>
</div>
</div> - Befolka src/app/home/home.component.css fil med stil för HTML-innehållet.
.innehåll {
radavstånd: 2rem;
textstorlek: 1.2em;
}.kort {
box-skugga: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
bredd: 400px;
stoppning: 16px;
marginal: 24px 0px;
bakgrundsfärg: vit rök;
typsnittsfamilj: sans serif;
} - Skapa en annan komponent med hjälp av ng generera komponent kommandot i terminalen. Du kommer att använda den nya komponenten som en om-sida.
ng generera komponent om - Öppna src/app/about/about.component.html fil och ersätt det nuvarande innehållet med nytt innehåll.
<div klass="innehåll">
<h2> Om mig </h2>
<sid>
jag'm John, och jag älskar att ta bilder. Jag har fotograferat i över 25 år. Besök mig på mina sociala medier:
</s>
<a href=""> Facebook </a><br>
<a href=""> LinkedIn </a><br>
<a href=""> Instagram </a><br>
</div> - Befolka src/app/about/about.component.css fil med stil för HTML-innehållet.
.innehåll {
radavstånd: 2rem;
textstorlek: 1.2em;
}
Hur man navigerar mellan de två sidorna
Du kan använda routing för att navigera från en sida till en annan. Du kan konfigurera detta i en routingfil. Det här exemplet kommer att ha en routingfil för hela appen, som finns i src/app/app-routing.module.ts.
- Om din app inte redan har app-routingmodulfilen kan du skapa en med hjälp av ng generera modul kommando. På en kommandorad eller terminal, navigera till programmets rotmapp och kör följande kommando:
ng generera modul app-routing --modul app --platt - Detta kommer att skapa en app-routing.module.ts-fil i din src/app mapp.
- Överst i filen lägger du till ytterligare importer för komponenterna Hem och Om. Se till att du också importerar RouterModule och CommonModule; i slutändan bör dina importsatser se ut så här:
importera { CommonModule } från '@angular/common';
importera { Rutter, RouterModule } från '@angular/router';
importera { HomeComponent } från './home/home.component';
importera { AboutComponent } från './about/about.component'; - Lägg till en ny ruttmatris under importerna för att lagra sökvägarna som du kommer att använda när du dirigerar till varje sida.
konst rutter: Rutter = [
{ väg: '', komponent: HomeComponent },
{ väg: 'handla om', komponent: AboutComponent }
]; - Ersätt NgModule-blocket med följande, vilket lägger till RouterModule till import- och exportmatrisen.
@NgModule({
deklarationer: [],
importer: [
CommonModule,
RouterModule.forRoot (rutter)
],
exporter: [RouterModule]
}) - I den src/app/app.component.html fil, ta bort det aktuella innehållet och lägg till router-outlet-taggen.
<div klass="behållare">
<router-uttag></router-outlet>
</div>
Hur man navigerar till den nya sidan i en HTML-fil
För att navigera till en sida i en HTML-fil, använd ankartaggen. Lägg till sökvägen som du angav i ruttmatrisen i href-attributet.
- I den src/app/app.component.html fil, lägg till två ankartaggar före container div. Detta gör att du kan navigera mellan hem- och Om-sidorna.
<div klass="navbar">
<en klass="länk" href="">Hem</a>
<en klass="länk" href="/about">Handla om</a>
</div> - Lägg till lite styling till src/app/app.component.css fil.
.behållare {
marginal: 48px 35%;
typsnittsfamilj: "Arial", sans serif;
visa: böja;
flex-riktning: kolumn;
align-objekt: Centrum;
}.navbar {
bakgrundsfärg: mörkslategray;
stoppning: 30px 50px;
visa: böja;
align-objekt: Centrum;
typsnittsfamilj: sans serif;
}.länk:först av typen {
marginal-höger: 32px;
}.länk {
Färg: vit;
text-dekoration: ingen;
textstorlek: 14pt;
teckensnittsvikt: djärv;
} - Lägg till lite stil till den övergripande sidmarginalen src/styles.css.
kropp {
marginal: 0;
stoppning: 0;
} - I en kommandotolk eller terminal navigerar du till rotmappen för Angular-applikationen. Kör programmet med hjälp av ng tjäna kommandot och vänta tills kompileringen är klar.
ng tjäna - I en webbläsare skriver du in localhostURL i URL-fältet för att visa din applikation. Som standard är detta vanligtvis http://localhost: 4200/.
- Din webbplats kommer att laddas till startsidan.
- Du kan navigera till sidan Om genom att klicka på länken Om i navigeringsfältet.
Hur man navigerar till den nya sidan i en TypeScript-fil
Hittills använder den här demon standard HTML-länkar för att ge navigering. För att navigera med TypeScript-fil istället för HTML-fil kan du använda router.navigate().
- I den src/app/app.component.html fil, ta bort ankartaggarna och ersätt dem med knapptaggar. Dessa knappar kommer att ha en klickhändelse som utlöser en funktion som kallas clickButton(). När du anropar funktionen clickButton() lägger du till URL-vägens sökväg som ett argument.
<knappklass="länk" (klicka)="clickButton('')">Hem</button>
<knappklass="länk" (klicka)="clickButton('/about')">Handla om</button> - Lägg till lite styling till knapparna i src/app/app.component.css fil.
knapp {
bakgrundsfärg: svart;
stoppning: 4px 8px;
markören: pekare;
} - På toppen av src/app/app.component.ts fil, importera routern.
importera { Router } från '@angular/router'; - Lägg till en ny konstruktor i klassen AppComponent och injicera routern inom parametrarna.
konstruktör(privat router: router) {
} - Under konstruktorn skapar du en ny funktion som heter clickButton(), som kommer att navigera till den nya sidan baserat på URL: en som du skickar in.
clickButton (sökväg: sträng) {
detta.router.navigate([sökväg]);
} - Kör kommandot ng serve igen i kommandotolken eller terminalen.
ng tjäna - Navigera till din webbplats i en webbläsare. Href är nu ersatt med två knappar.
- Klicka på Handla om knapp. Den kommer vidare till sidan Om.
Skapa flera sidor i en vinkelapplikation
Du kan dirigera mellan flera sidor inom en Angular-applikation genom att använda routing. Om du har separata komponenter för varje sida kan du konfigurera sökvägar för dina rutter inom routingmodulen.
För att navigera till en annan sida via en HTML-fil, använd en ankartagg med href-attributet som routingsökväg till den sidan. För att navigera till en annan sida via en TypeScript-fil kan du använda metoden router.navigate().
Om du bygger en Angular-applikation kan du använda Angular-direktiv. Dessa låter dig använda dynamiska if-satser, for-loopar eller andra logiska operationer i HTML-filen för en komponent.