Jos luot Angular-sovelluksen, jossa on useita sivuja, sinun on navigoitava niiden välillä reitityksen avulla. Voit tehdä tämän luomalla luettelon reiteistä, joissa on polku jokaiselle reititysmoduulin sivulle.
Voit sitten reitittää muille HTML-tiedoston sivuille käyttämällä ankkuritunnistetta. Voit myös reitittää muille TypeScript-tiedoston sivuille käyttämällä router.navigate()-menetelmää.
Uuden sivun luominen kulmasovelluksessa
Luo ensin uusi Angular-sovellus. Voit myös käyttää olemassa olevaa. Jos et ole perehtynyt uuden Angular-sovelluksen luomiseen, voit oppia siitä yhdessä muiden kanssa Angularissa käytetyt johdantokäsitteet.
-
Luo uusi komponentti Angular-sovellukseesi käyttämällä ng tuottaa komponenttia komento:
ng luoda komponenttien kotiin - Avaa src/app/home/home.component.html tiedosto ja korvaa nykyinen sisältö uudella sisällöllä.
<div class="sisältö">
<h2> Koti </h2>
<s>
Olen valokuvaaja, joka kuvaa hääkuvausta. Tutustu projekteihini!
</s>
<div class="kortti-">
<h4> John & Amy </h4>
<s> Blue Mountains, Australia </s>
</div>
<div class="kortti-">
<h4> Ross & Rach </h4>
<s> Hunter Valley Gardens, Australia </s>
</div>
</div> - Kannata src/app/home/home.component.css tiedosto HTML-sisällön tyylillä.
.sisältö {
viivankorkeus: 2rem;
Fonttikoko: 1.2em;
}.kortti {
laatikko-varjo: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
leveys: 400px;
pehmuste: 16px;
marginaali: 24px 0px;
taustaväri: valkoinen savu;
font-perhe: sans-serif;
} - Luo toinen komponentti käyttämällä ng tuottaa komponenttia komento terminaalissa. Käytät uutta komponenttia tietosivuna.
ng tuottaa komponentin noin - Avaa src/app/about/about.component.html tiedosto ja korvaa nykyinen sisältö uudella sisällöllä.
<div class="sisältö">
<h2> Minusta </h2>
<s>
minä'm John, ja rakastan valokuvaamista. Olen valokuvannut yli 25 vuotta. Tule käymään sosiaalisessa mediassani:
</s>
<a href=""> Facebook </a><br>
<a href=""> LinkedIn </a><br>
<a href=""> Instagram </a><br>
</div> - Kannata src/app/about/about.component.css tiedosto HTML-sisällön tyylillä.
.sisältö {
viivankorkeus: 2rem;
Fonttikoko: 1.2em;
}
Kuinka navigoida kahden sivun välillä
Voit käyttää reititystä navigoidaksesi sivulta toiselle. Voit määrittää tämän reititystiedostossa. Tässä esimerkissä on yksi reititystiedosto koko sovellukselle, joka sijaitsee src/app/app-routing.module.ts.
- Jos sovelluksessasi ei vielä ole sovelluksen reititysmoduulitiedostoa, voit luoda sellaisen käyttämällä ng luoda moduulin komento. Siirry komentorivillä tai terminaalilla sovelluksen juurikansioon ja suorita seuraava komento:
ng luo module app-routing --module app --flat - Tämä luo tiedostoosi app-routing.module.ts src/app kansio.
- Lisää tiedoston yläosaan Home- ja About-komponenttien lisätuonteja. Varmista, että tuot myös RouterModulen ja CommonModulen; viime kädessä tuontilausuntosi pitäisi näyttää tältä:
tuonti { CommonModule } alkaen '@kulma/yleinen';
tuonti { Reitit, RouterModule } alkaen '@kulma/reititin';
tuonti { Kotikomponentti } alkaen './home/home.component';
tuonti { Tietoja komponentista } alkaen './about/about.component'; - Lisää tuontien alle uusi reittitaulukko tallentaaksesi polut, joita käytät reitittäessäsi kullekin sivulle.
konst reitit: Routes = [
{ polku: '', komponentti: HomeComponent },
{ polku: 'noin', komponentti: AboutComponent }
]; - Korvaa NgModule-lohko seuraavalla, mikä lisää RouterModulen tuonti- ja vientitaulukkoon.
@NgModule({
ilmoitukset: [],
tuonti: [
CommonModule,
RouterModule.forRoot (reitit)
],
vienti: [RouterModule]
}) - Vuonna src/app/app.component.html tiedosto, poista nykyinen sisältö ja lisää reititin-ulostulotunniste.
<div class="kontti">
<reititin-pistorasia></router-outlet>
</div>
Uudelle sivulle siirtyminen HTML-tiedostossa
Voit navigoida HTML-tiedoston sivulle käyttämällä ankkuritunnistetta. Lisää href-attribuutissa polku, jonka määritit routes-taulukossa.
- Vuonna src/app/app.component.html tiedosto, lisää kaksi ankkuritunnistetta ennen säilön div. Näin voit siirtyä Etusivu- ja Tietoja-sivujen välillä.
<div class="navigointipalkki">
<luokka ="linkki" href="">Koti</a>
<luokka ="linkki" href="/about">Noin</a>
</div> - Lisää tyyliin src/app/app.component.css tiedosto.
.container {
marginaali: 48px 35%;
font-perhe: &lainaus;Arial&lainaus;, sans-serif;
näyttö: flex;
flex-suunta: sarakkeessa;
kohdista-kohteet: keskusta;
}.navbar {
taustaväri: tumman kivenharmaa;
pehmuste: 30px 50px;
näyttö: flex;
kohdista-kohteet: keskusta;
font-perhe: sans-serif;
}.linkki:ensimmäinen {
marginaali-oikea: 32px;
}.linkki {
väri-: valkoinen;
teksti-koriste: ei mitään;
Fonttikoko: 14pt;
fontin paino: lihavoitu;
} - Lisää hieman tyyliä sivun yleiseen marginaaliin src/styles.css.
kehon {
marginaali: 0;
pehmuste: 0;
} - Siirry komentokehotteessa tai terminaalissa Angular-sovelluksen juurikansioon. Suorita sovellus käyttämällä palvella komento ja odota, että se on käännetty loppuun.
palvella - Näet sovelluksesi kirjoittamalla selaimen URL-palkkiin localhostURL. Oletuksena tämä on yleensä http://localhost: 4200/.
- Verkkosivustosi latautuu etusivulle.
- Voit siirtyä Tietoja-sivulle napsauttamalla navigointipalkin Tietoja-linkkiä.
Kuinka siirtyä uudelle sivulle TypeScript-tiedostossa
Toistaiseksi tämä esittely käyttää tavallisia HTML-linkkejä navigoinnin tarjoamiseen. Voit navigoida TypeScript-tiedoston avulla HTML-tiedoston sijaan käyttämällä router.navigate().
- Vuonna src/app/app.component.html tiedosto, poista ankkuritunnisteet ja korvaa ne painiketunnisteilla. Näillä painikkeilla on napsautustapahtuma, joka käynnistää toiminnon nimeltä clickButton(). Kun kutsut clickButton()-funktiota, lisää URL-reittipolku argumentiksi.
<painikeluokka="linkki" (napsauta)="clickButton('')">Koti</button>
<painikeluokka="linkki" (napsauta)="clickButton('/about')">Noin</button> - Lisää hieman tyyliä painikkeisiin src/app/app.component.css tiedosto.
-painiketta {
taustaväri: musta;
pehmuste: 4px 8px;
kohdistin: osoitin;
} - Yläosassa src/app/app.component.ts tiedosto, tuo reititin.
tuonti { Reititin } alkaen '@kulma/reititin'; - Lisää uusi rakentaja AppComponent-luokkaan ja lisää reititin parametrien sisällä.
rakentaja(yksityinen reititin: reititin) {
} - Luo rakentajan alle uusi funktio nimeltä clickButton(), joka siirtyy uudelle sivulle antamasi URL-osoitteen perusteella.
clickButton (polku: merkkijono) {
Tämä.router.navigate([polku]);
} - Suorita ng serve -komento uudelleen komentokehotteessa tai terminaalissa.
palvella - Siirry verkkosivustollesi selaimella. href on nyt korvattu kahdella painikkeella.
- Klikkaa Noin -painiketta. Se ohjaa Tietoja-sivulle.
Useiden sivujen luominen kulmikkaassa sovelluksessa
Voit reitittää useiden sivujen välillä Angular-sovelluksessa käyttämällä reititystä. Jos sinulla on erilliset komponentit jokaiselle sivulle, voit määrittää polut reiteille reititysmoduulissa.
Jos haluat navigoida toiselle sivulle HTML-tiedoston kautta, käytä kyseisen sivun reitityspoluna ankkuritunnistetta, jossa on href-attribuutti. Voit siirtyä toiselle sivulle TypeScript-tiedoston avulla käyttämällä router.navigate()-menetelmää.
Jos rakennat Angular-sovellusta, voit käyttää Angular-direktiivejä. Niiden avulla voit käyttää dynaamisia if-lauseita, for-silmukoita tai muita loogisia toimintoja komponentin HTML-tiedostossa.