Če ustvarjate aplikacijo Angular z več stranmi, morate za krmarjenje med njimi uporabiti usmerjanje. To lahko storite tako, da ustvarite seznam poti s potjo za vsako stran v modulu za usmerjanje.
Nato lahko z uporabo sidrne oznake usmerite na druge strani znotraj datoteke HTML. Z metodo router.navigate() lahko tudi usmerite na druge strani znotraj datoteke TypeScript.
Kako ustvariti novo stran v aplikaciji Angular
Najprej ustvarite novo aplikacijo Angular. Uporabite lahko tudi obstoječega. Če niste seznanjeni s tem, kako ustvariti novo aplikacijo Angular, se lahko o tem naučite skupaj z drugimi uvodni koncepti, uporabljeni v Angularju.
-
Ustvarite novo komponento v svoji aplikaciji Angular uporabljati ng ustvari komponento ukaz:
ng ustvarjanje komponente home - Odprite src/app/home/home.component.html datoteko in zamenjajte trenutno vsebino z novo vsebino.
<razred div="vsebino">
<h2> domov </h2>
<str>
Sem fotograf, ki se ukvarja s poročno fotografijo. Oglejte si moje projekte!
</str>
<razred div="kartica ">
<h4> Janez & Amy </h4>
<str> Modre gore, Avstralija </str>
</div>
<razred div="kartica">
<h4> Ross & Rach </h4>
<str> Hunter Valley Gardens, Avstralija </str>
</div>
</div> - Napolnite src/app/home/home.component.css datoteka s slogom za vsebino HTML.
.vsebina {
višina vrstice: 2rem;
velikost pisave: 1.2em;
}.kartica {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
premer: 400px;
oblazinjenje: 16px;
marža: 24px 0px;
Barva ozadja: beli dim;
družina pisav: sans-serif;
} - Ustvarite drugo komponento z uporabo ng ustvari komponento ukaz v terminalu. Novo komponento boste uporabljali kot stran o tem.
ng ustvari komponento o - Odprite src/app/about/about.component.html datoteko in zamenjajte trenutno vsebino z novo vsebino.
<razred div="vsebino">
<h2> O meni </h2>
<str>
jaz'm John, rad fotografiram. S fotografijo se ukvarjam že več kot 25 let. Obiščite me na mojih družbenih medijih:
</str>
<a href=""> Facebook </a><št>
<a href=""> LinkedIn </a><št>
<a href=""> Instagram </a><št>
</div> - Napolnite src/app/about/about.component.css datoteka s slogom za vsebino HTML.
.vsebina {
višina vrstice: 2rem;
velikost pisave: 1.2em;
}
Kako krmariti med obema stranema
Za navigacijo z ene strani na drugo lahko uporabite usmerjanje. To lahko konfigurirate v datoteki za usmerjanje. Ta primer bo imel eno usmerjevalno datoteko za celotno aplikacijo, ki se nahaja v src/app/app-routing.module.ts.
- Če vaša aplikacija še nima datoteke modula za usmerjanje aplikacije, jo lahko ustvarite z uporabo ng generiraj modul ukaz. V ukazni vrstici ali terminalu se pomaknite do korenske mape aplikacije in zaženite naslednji ukaz:
ng ustvari modul app-routing --module app --flat - To bo ustvarilo datoteko app-routing.module.ts v vašem src/app mapo.
- Na vrhu datoteke dodajte dodatne uvoze za komponenti Domov in O aplikaciji. Prepričajte se, da uvozite tudi RouterModule in CommonModule; končno bi morali vaši uvozni stavki izgledati takole:
uvoz {CommonModule} od '@angular/common';
uvoz { Routes, RouterModule } od '@angular/router';
uvoz { HomeComponent } od './home/home.component';
uvoz { AboutComponent } od './about/about.component'; - Pod uvozi dodajte novo matriko poti za shranjevanje poti, ki jih boste uporabili pri usmerjanju na vsako stran.
konst poti: Poti = [
{ pot: '', komponento: HomeComponent },
{ pot: 'o', komponento: AboutComponent }
]; - Zamenjajte blok NgModule z naslednjim, ki doda RouterModule v matriko uvozov in izvozov.
@NgModule({
izjave: [],
uvoz: [
CommonModule,
RouterModule.forRoot (poti)
],
izvozi: [RouterModule]
}) - V src/app/app.component.html datoteko, odstranite trenutno vsebino in dodajte oznako usmerjevalnika-outlet.
<razred div="posoda">
<usmerjevalnik-izhod></router-outlet>
</div>
Kako se pomakniti na novo stran v datoteki HTML
Za navigacijo do strani v datoteki HTML uporabite sidrno oznako. V atributu href dodajte pot, ki ste jo podali v matriki poti.
- V src/app/app.component.html dodajte dve sidrni oznaki pred vsebnik div. To vam bo omogočilo krmarjenje med domačo stranjo in stranjo O strani.
<razred div="navbar">
<razred="povezava" href="">domov</a>
<razred="povezava" href="/about">O tem</a>
</div> - Dodajte nekaj stila src/app/app.component.css mapa.
.posoda {
marža: 48px 35%;
družina pisav: "Arial", sans-serif;
zaslon: flex;
flex-direction: stolpec;
align-items: center;
}.navbar {
Barva ozadja: temnoslatnosiva;
oblazinjenje: 30px 50px;
zaslon: flex;
align-items: center;
družina pisav: sans-serif;
}.link:prvega tipa {
margin-desno: 32px;
}.link {
barva: bela;
besedilo-okras: nič;
velikost pisave: 14točka;
teža pisave: krepko;
} - Dodajte nekaj sloga splošnemu robu strani v src/styles.css.
telo {
marža: 0;
oblazinjenje: 0;
} - V ukaznem pozivu ali terminalu se pomaknite do korenske mape aplikacije Angular. Zaženite aplikacijo z uporabo ng služijo in počakajte, da se prevajanje konča.
ng služijo - V brskalniku v vrstico URL vnesite URL lokalnega gostitelja, da si ogledate svojo aplikacijo. Privzeto je to običajno http://localhost: 4200/.
- Vaše spletno mesto se bo naložilo na domačo stran.
- Do strani O programu se lahko pomaknete s klikom na povezavo O programu v navigacijski vrstici.
Kako se pomakniti do nove strani v datoteki TypeScript
Do zdaj ta predstavitev uporablja standardne povezave HTML za zagotavljanje navigacije. Za krmarjenje z uporabo datoteke TypeScript namesto datoteke HTML lahko uporabite router.navigate().
- V src/app/app.component.html datoteko, odstranite sidrne oznake in jih zamenjajte z gumbnimi oznakami. Ti gumbi bodo imeli dogodek klika, ki sproži funkcijo, imenovano clickButton(). Ko pokličete funkcijo clickButton(), dodajte pot poti URL-ja kot argument.
<razred gumba="povezava" (klikni)="clickButton('')">domov</button>
<razred gumba="povezava" (klikni)="clickButton('/about')">O tem</button> - Dodajte nekaj sloga gumbom v src/app/app.component.css mapa.
gumb {
Barva ozadja: Črna;
oblazinjenje: 4px 8px;
kazalec: kazalec;
} - Na vrhu src/app/app.component.ts datoteko, uvozite usmerjevalnik.
uvoz { Usmerjevalnik } od '@angular/router'; - Dodajte nov konstruktor znotraj razreda AppComponent in vnesite usmerjevalnik znotraj parametrov.
konstruktor(zasebni usmerjevalnik: usmerjevalnik) {
} - Pod konstruktorjem ustvarite novo funkcijo, imenovano clickButton(), ki bo krmarila na novo stran na podlagi URL-ja, ki ste ga posredovali.
clickButton (pot: niz) {
to.router.navigate([pot]);
} - Znova zaženite ukaz ng serve v ukaznem pozivu ali terminalu.
ng služijo - V brskalniku se pomaknite do svojega spletnega mesta. Href je zdaj nadomeščen z dvema gumboma.
- Kliknite na O tem gumb. Usmerjen bo na stran O programu.
Ustvarjanje več strani v aplikaciji Angular
Z usmerjanjem lahko usmerjate med več stranmi znotraj aplikacije Angular. Če imate ločene komponente za vsako stran, lahko konfigurirate poti za vaše poti znotraj modula za usmerjanje.
Za navigacijo na drugo stran prek datoteke HTML uporabite sidrno oznako z atributom href kot usmerjevalno pot do te strani. Za navigacijo na drugo stran prek datoteke TypeScript lahko uporabite metodo router.navigate().
Če gradite aplikacijo Angular, lahko uporabite direktive Angular. Ti vam omogočajo uporabo dinamičnih if-izjav, for-zank ali drugih logičnih operacij v datoteki HTML komponente.