Hvis du lager en Angular-applikasjon med flere sider, må du bruke ruting for å navigere mellom dem. Du kan gjøre dette ved å lage en liste over ruter med en sti for hver side i rutemodulen.
Du kan deretter rute til andre sider i en HTML-fil ved å bruke en ankerkode. Du kan også rute til andre sider i en TypeScript-fil ved å bruke metoden router.navigate().
Hvordan lage en ny side i en vinkelapplikasjon
Først oppretter du en ny Angular-applikasjon. Du kan også bruke en eksisterende. Hvis du ikke er kjent med hvordan du lager en ny Angular-app, kan du lære om den sammen med andre innledende konsepter brukt i Angular.
-
Opprett en ny komponent i Angular-appen din bruker ng generere komponent kommando:
ng generere komponent hjem - Åpne src/app/home/home.component.html fil, og erstatte gjeldende innhold med nytt innhold.
<div klasse="innhold">
<h2> Hjem </h2>
<s>
Jeg er en fotograf som driver med bryllupsfotografering. Sjekk ut prosjektene mine!
</s>
<div klasse="kort">
<h4> John & Amy </h4>
<s> Blue Mountains, Australia </s>
</div>
<div klasse="kort">
<h4> Ross & Rach </h4>
<s> Hunter Valley Gardens, Australia </s>
</div>
</div> - Fyll ut src/app/home/home.component.css fil med stil for HTML-innholdet.
.innhold {
linjehøyde: 2rem;
skriftstørrelse: 1.2em;
}.kort {
boks-skygge: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
bredde: 400px;
polstring: 16px;
margin: 24px 0px;
bakgrunnsfarge: hvit røyk;
font-familie: sans serif;
} - Lag en annen komponent ved å bruke ng generere komponent kommando i terminalen. Du vil bruke den nye komponenten som en om-side.
ng generere komponent om - Åpne src/app/about/about.component.html fil, og erstatte gjeldende innhold med nytt innhold.
<div klasse="innhold">
<h2> Om meg </h2>
<s>
Jeg'm John, og jeg elsker å ta bilder. Jeg har tatt bilder i over 25 år. Besøk meg på mine sosiale medier:
</s>
<a href=""> Facebook </en><br>
<a href=""> LinkedIn </en><br>
<a href=""> Instagram </en><br>
</div> - Fyll ut src/app/about/about.component.css fil med stil for HTML-innholdet.
.innhold {
linjehøyde: 2rem;
skriftstørrelse: 1.2em;
}
Hvordan navigere mellom de to sidene
Du kan bruke ruting for å navigere fra en side til en annen. Du kan konfigurere dette i en rutingfil. Dette eksemplet vil ha én rutingfil for hele appen, plassert i src/app/app-routing.module.ts.
- Hvis appen din ikke allerede har app-rutingsmodulfilen, kan du generere en ved å bruke ng generere modul kommando. På en kommandolinje eller terminal, naviger til rotmappen til programmet og kjør følgende kommando:
ng generere modul app-ruting --modul app --flat - Dette vil opprette en app-routing.module.ts-fil i din src/app mappe.
- Øverst i filen legger du til flere importer for Home- og About-komponentene. Sørg for at du også importerer RouterModule og CommonModule; til syvende og sist skal importerklæringene dine se slik ut:
import { CommonModule } fra '@angular/common';
import { Ruter, RouterModule } fra '@angular/ruter';
import { HomeComponent } fra './home/home.component';
import { AboutComponent } fra './about/about.component'; - Legg til en ny rutematrise under importen for å lagre banene du vil bruke når du ruter til hver side.
konst ruter: Ruter = [
{ sti: '', komponent: HomeComponent },
{ sti: 'Om', komponent: AboutComponent }
]; - Erstatt NgModule-blokken med følgende, som legger til RouterModule til import- og eksportarrayen.
@NgModule({
erklæringer: [],
importerer: [
CommonModule,
RouterModule.forRoot (ruter)
],
eksporter: [RouterModule]
}) - I src/app/app.component.html fil, fjern gjeldende innhold, og legg til ruter-uttak-taggen.
<div klasse="container">
<ruter-uttak></router-outlet>
</div>
Hvordan navigere til den nye siden i en HTML-fil
For å navigere til en side i en HTML-fil, bruk ankertaggen. I href-attributtet legger du til banen du spesifiserte i rutematrisen.
- I src/app/app.component.html fil, legg til to ankertagger før container-div. Dette lar deg navigere mellom Hjem- og Om-sidene.
<div klasse="navbar">
<en klasse="link" href="">Hjem</en>
<en klasse="link" href="/about">Om</en>
</div> - Legg til litt styling til src/app/app.component.css fil.
.container {
margin: 48px 35%;
font-familie: "Arial", sans serif;
vise: bøye seg;
flex-retning: kolonne;
align-elementer: senter;
}.navbar {
bakgrunnsfarge: mørkslagegray;
polstring: 30px 50px;
vise: bøye seg;
align-elementer: senter;
font-familie: sans serif;
}.link:først av typen {
marg-høyre: 32px;
}.link {
farge: hvit;
tekst-dekorasjon: ingen;
skriftstørrelse: 14pt;
font-vekt: modig;
} - Legg til litt styling til den generelle sidemarginen src/styles.css.
kropp {
margin: 0;
polstring: 0;
} - I en ledetekst eller terminal, naviger til rotmappen til Angular-applikasjonen. Kjør programmet ved å bruke ng tjene kommando, og vent til den er ferdig kompileringen.
ng tjene - I en nettleser skriver du inn localhostURL i URL-linjen for å se applikasjonen din. Som standard er dette vanligvis http://localhost: 4200/.
- Nettstedet ditt vil lastes inn på hjemmesiden.
- Du kan navigere til Om-siden ved å klikke på Om-koblingen i navigasjonslinjen.
Hvordan navigere til den nye siden i en TypeScript-fil
Så langt bruker denne demoen standard HTML-lenker for å gi navigasjon. For å navigere ved å bruke TypeScript-filen i stedet for HTML-filen, kan du bruke router.navigate().
- I src/app/app.component.html fil, fjern ankermerkene og erstatt dem med knappemerker. Disse knappene vil ha en klikkhendelse som utløser en funksjon kalt clickButton(). Når du kaller clickButton()-funksjonen, legger du til URL-rutebanen som et argument.
<knappeklasse="link" (klikk)="klikkknapp('')">Hjem</button>
<knappeklasse="link" (klikk)="klikkknapp('/about')">Om</button> - Legg til litt styling til knappene i src/app/app.component.css fil.
knapp {
bakgrunnsfarge: svart;
polstring: 4px 8px;
markøren: pekeren;
} - På toppen av src/app/app.component.ts fil, importer ruteren.
import { Ruter } fra '@angular/ruter'; - Legg til en ny konstruktør i AppComponent-klassen, og injiser ruteren innenfor parameterne.
konstruktør(privat ruter: ruter) {
} - Under konstruktøren oppretter du en ny funksjon kalt clickButton(), som vil navigere til den nye siden basert på URL-en du sender inn.
clickButton (bane: streng) {
dette.router.navigate([bane]);
} - Kjør ng serve-kommandoen på nytt i ledeteksten eller terminalen.
ng tjene - Naviger til nettstedet ditt i en nettleser. Href er nå erstattet med to knapper.
- Klikk på Om knapp. Den vil rute til Om-siden.
Opprette flere sider i en vinkelapplikasjon
Du kan rute mellom flere sider i en Angular-applikasjon ved å bruke ruting. Hvis du har separate komponenter for hver side, kan du konfigurere stier for rutene dine i rutemodulen.
For å navigere til en annen side via en HTML-fil, bruk en anker-tag med href-attributtet som ruten til den siden. For å navigere til en annen side via en TypeScript-fil, kan du bruke metoden router.navigate().
Hvis du bygger en Angular-applikasjon, kan du bruke Angular-direktiver. Disse lar deg bruke dynamiske if-setninger, for-løkker eller andre logiske operasjoner i HTML-filen til en komponent.
