Hvis du opretter en Angular-applikation med flere sider, skal du bruge routing til at navigere mellem dem. Det kan du gøre ved at oprette en liste over ruter med en sti for hver side i rutemodulet.
Du kan derefter rute til andre sider i en HTML-fil ved at bruge et ankertag. Du kan også rute til andre sider i en TypeScript-fil ved at bruge metoden router.navigate().
Sådan opretter du en ny side i en vinkelapplikation
Først skal du oprette en ny Angular-applikation. Du kan også bruge en eksisterende. Hvis du ikke er bekendt med, hvordan du opretter en ny Angular-app, kan du lære om det sammen med andre indledende begreber brugt i Angular.
-
Opret en ny komponent i din Angular-app bruger ng generere komponent kommando:
ng generere komponent hjem - Åbn src/app/home/home.component.html fil, og erstatte det nuværende indhold med nyt indhold.
<div klasse="indhold">
<h2> Hjem </h2>
<s>
Jeg er en fotograf, der laver bryllupsfotografering. Tjek mine projekter ud!
</s>
<div klasse="kort">
<h4> John & Amy </h4>
<s> Blue Mountains, Australien </s>
</div>
<div klasse="kort">
<h4> Ross & Rach </h4>
<s> Hunter Valley Gardens, Australien </s>
</div>
</div> - Befolke src/app/home/home.component.css fil med stil til HTML-indholdet.
.indhold {
linjehøjde: 2rem;
skriftstørrelse: 1.2em;
}.kort {
kasse-skygge: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
bredde: 400px;
polstring: 16px;
margen: 24px 0px;
baggrundsfarve: hvid røg;
skrifttype-familie: sans serif;
} - Opret en anden komponent ved hjælp af ng generere komponent kommando i terminalen. Du vil bruge den nye komponent som en om-side.
ng generere komponent om - Åbn src/app/about/about.component.html fil, og erstatte det nuværende indhold med nyt indhold.
<div klasse="indhold">
<h2> Om mig </h2>
<s>
jeg'm John, og jeg elsker at tage billeder. Jeg har taget billeder i over 25 år. Besøg mig på mine sociale medier:
</s>
<a href=""> Facebook </en><br>
<a href=""> LinkedIn </en><br>
<a href=""> Instagram </en><br>
</div> - Befolke src/app/about/about.component.css fil med stil til HTML-indholdet.
.indhold {
linjehøjde: 2rem;
skriftstørrelse: 1.2em;
}
Sådan navigerer du mellem de to sider
Du kan bruge routing til at navigere fra en side til en anden. Du kan konfigurere dette i en routing-fil. Dette eksempel vil have én routingfil for hele appen, placeret i src/app/app-routing.module.ts.
- Hvis din app ikke allerede har app-routing-modulfilen, kan du generere en ved hjælp af ng generere modul kommando. I en kommandolinje eller terminal skal du navigere til rodmappen for programmet og køre følgende kommando:
ng generere modul app-routing --modul app --flad - Dette vil oprette en app-routing.module.ts-fil i din src/app folder.
- Øverst i filen skal du tilføje yderligere importer for komponenterne Hjem og Om. Sørg for, at du også importerer RouterModule og CommonModule; i sidste ende skal dine importerklæringer se ud som:
importere { CommonModule } fra '@angular/fælles';
importere { Ruter, RouterModule } fra '@angular/router';
importere { HomeComponent } fra './home/home.component';
importere { AboutComponent } fra './om/om.komponent'; - Under importen skal du tilføje et nyt rutearray for at gemme de stier, du vil bruge, når du dirigerer til hver side.
konst ruter: Ruter = [
{ sti: '', komponent: HomeComponent },
{ sti: 'om', komponent: AboutComponent }
]; - Erstat NgModule-blokken med følgende, som tilføjer RouterModule til import- og eksportarrayet.
@NgModule({
erklæringer: [],
import: [
CommonModule,
RouterModule.forRoot (ruter)
],
eksporter: [RouterModule]
}) - I den src/app/app.component.html fil, fjern det aktuelle indhold og tilføj router-outlet-tagget.
<div klasse="beholder">
<router-udtag></router-outlet>
</div>
Sådan navigerer du til den nye side i en HTML-fil
Brug ankertagget for at navigere til en side i en HTML-fil. I href-attributten skal du tilføje stien, som du har angivet i rute-arrayet.
- I den src/app/app.component.html fil, skal du tilføje to anker-tags før container-div. Dette giver dig mulighed for at navigere mellem Hjem og Om sider.
<div klasse="navbar">
<en klasse ="link" href="">Hjem</en>
<en klasse ="link" href="/about">Om</en>
</div> - Tilføj lidt styling til src/app/app.component.css fil.
.beholder {
margen: 48px 35%;
skrifttype-familie: "Arial", sans serif;
Skærm: bøje;
flex-retning: kolonne;
align-elementer: centrum;
}.navbar {
baggrundsfarve: mørkslagegray;
polstring: 30px 50px;
Skærm: bøje;
align-elementer: centrum;
skrifttype-familie: sans serif;
}.link:først af typen {
margin-højre: 32px;
}.link {
farve: hvid;
tekst-dekoration: ingen;
skriftstørrelse: 14pt;
skrifttype-vægt: fremhævet;
} - Tilføj lidt styling til den samlede sidemargen i src/styles.css.
legeme {
margen: 0;
polstring: 0;
} - I en kommandoprompt eller terminal skal du navigere til rodmappen i Angular-applikationen. Kør applikationen ved hjælp af ng tjene kommando, og vent på, at den er færdig med kompileringen.
ng tjene - I en browser skal du indtaste localhostURL i URL-linjen for at se din applikation. Som standard er dette normalt http://localhost: 4200/.
- Dit websted indlæses på startsiden.
- Du kan navigere til siden Om ved at klikke på linket Om i navigationslinjen.
Sådan navigerer du til den nye side i en TypeScript-fil
Indtil videre bruger denne demo standard HTML-links til at give navigation. For at navigere ved hjælp af TypeScript-fil i stedet for HTML-fil, kan du bruge router.navigate().
- I den src/app/app.component.html fil, fjern ankermærkerne og erstat dem med knapmærker. Disse knapper vil have en klikhændelse, der udløser en funktion kaldet clickButton(). Når du kalder clickButton()-funktionen, skal du tilføje URL-rutestien som et argument.
<knapklasse="link" (klik)="klikknap('')">Hjem</button>
<knapklasse="link" (klik)="klikknap('/about')">Om</button> - Tilføj lidt styling til knapperne i src/app/app.component.css fil.
knap {
baggrundsfarve: sort;
polstring: 4px 8px;
cursoren: pointer;
} - På toppen af src/app/app.component.ts fil, skal du importere routeren.
importere { Router } fra '@angular/router'; - Tilføj en ny konstruktør i AppComponent-klassen, og injicer routeren inden for parametrene.
konstruktør(privat router: router) {
} - Under konstruktøren skal du oprette en ny funktion kaldet clickButton(), som vil navigere til den nye side baseret på den URL, du sender ind.
clickButton (sti: streng) {
dette.router.navigate([sti]);
} - Kør ng serve-kommandoen igen i kommandoprompten eller terminalen.
ng tjene - Naviger til dit websted i en browser. Href er nu erstattet med to knapper.
- Klik på Om knap. Det vil lede til siden Om.
Oprettelse af flere sider i en vinkelapplikation
Du kan rute mellem flere sider i en Angular-applikation ved at bruge routing. Hvis du har separate komponenter for hver side, kan du konfigurere stier til dine ruter i routingmodulet.
For at navigere til en anden side via en HTML-fil, skal du bruge et ankertag med href-attributten som ruten til den pågældende side. For at navigere til en anden side via en TypeScript-fil kan du bruge metoden router.navigate().
Hvis du bygger en Angular-applikation, kan du bruge Angular-direktiver. Disse giver dig mulighed for at bruge dynamiske if-sætninger, for-loops eller andre logiske operationer i HTML-filen af en komponent.