Jei kuriate „Angular“ programą su keliais puslapiais, norėdami naršyti tarp jų turite naudoti maršruto parinkimą. Tai galite padaryti sukūrę maršrutų sąrašą su keliu kiekvienam maršruto parinkimo modulio puslapiui.
Tada galite nukreipti į kitus HTML failo puslapius naudodami inkaro žymą. Taip pat galite nukreipti į kitus puslapius „TypeScript“ faile naudodami maršrutizatoriaus.navigate() metodą.
Kaip sukurti naują puslapį kampinėje programoje
Pirmiausia sukurkite naują „Angular“ programą. Taip pat galite naudoti esamą. Jei nežinote, kaip sukurti naują „Angular“ programą, galite sužinoti apie ją kartu su kitomis įvadinės sąvokos, vartojamos Angular.
-
Sukurkite naują komponentą „Angular“ programoje naudojant ng generuoti komponentą komanda:
ng generuoti komponentų namus - Atidaryk src/app/home/home.component.html failą ir pakeiskite esamą turinį nauju.
<div klasė ="turinys">
<h2> Namai </h2>
<p>
Esu fotografas, fotografuojantis vestuves. Peržiūrėkite mano projektus!
</p>
<div klasė ="kortelę">
<h4> Jonas & Amy </h4>
<p> Mėlynieji kalnai, Australija </p>
</div>
<div klasė ="kortelę">
<h4> Ross & Rach </h4>
<p> Hanterio slėnio sodai, Australija </p>
</div>
</div> - Užpildykite src/app/home/home.component.css failą su HTML turinio stiliumi.
.turinys {
linijos aukštis: 2rem;
šrifto dydis: 1.2em;
}.kortelė {
dėžutė-šešėlis: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
plotis: 400px;
kamšalas: 16px;
marža: 24px 0px;
fono spalva: baltų dūmų;
šrifto šeima: be serifo;
} - Sukurkite kitą komponentą naudodami ng generuoti komponentą komanda terminale. Naująjį komponentą naudosite kaip puslapį apie.
ng generuoti komponentą apie - Atidaryk src/app/about/about.component.html failą ir pakeiskite esamą turinį nauju.
<div klasė ="turinys">
<h2> Apie mane </h2>
<p>
aš'Jonas ir man patinka fotografuoti. Fotografuoju daugiau nei 25 metus. Aplankykite mane socialinėje žiniasklaidoje:
</p>
<a href=""> Facebook </a><br>
<a href=""> LinkedIn </a><br>
<a href=""> Instagramas </a><br>
</div> - Užpildykite src/app/about/about.component.css failą su HTML turinio stiliumi.
.turinys {
linijos aukštis: 2rem;
šrifto dydis: 1.2em;
}
Kaip naršyti tarp dviejų puslapių
Norėdami pereiti iš vieno puslapio į kitą, galite naudoti maršrutą. Tai galite sukonfigūruoti maršruto faile. Šiame pavyzdyje bus vienas visos programos maršruto failas, esantis src/app/app-routing.module.ts.
- Jei jūsų programoje dar nėra programos nukreipimo modulio failo, galite jį sugeneruoti naudodami ng generuoti modulį komandą. Komandinėje eilutėje arba terminale eikite į programos šakninį aplanką ir paleiskite šią komandą:
ng generuoti modulio programos maršrutą --module app --flat - Taip jūsų kompiuteryje bus sukurtas failas app-routing.module.ts src/app aplanką.
- Failo viršuje pridėkite papildomų komponentų Pagrindinis ir Apie importavimą. Įsitikinkite, kad taip pat importuojate RouterModule ir CommonModule; galiausiai jūsų importo teiginiai turėtų atrodyti taip:
importuoti { CommonModule } iš '@kampinis/bendras';
importuoti { Routes, RouterModule } iš '@kampinis/maršrutizatorius';
importuoti { HomeComponent } iš './home/home.component';
importuoti { Apie komponentą } iš './about/about.component'; - Po importu pridėkite naują maršrutų masyvą, kad išsaugotumėte kelius, kuriuos naudosite nukreipdami į kiekvieną puslapį.
konst maršrutai: Maršrutai = [
{ kelias: '', komponentas: HomeComponent },
{ kelias: 'apie', komponentas: Apie komponentą }
]; - Pakeiskite NgModule bloką tokiu, kuris prideda RouterModule prie importavimo ir eksporto masyvo.
@NgModule({
deklaracijos: [],
importas: [
CommonModule,
RouterModule.forRoot (maršrutai)
],
eksportuoja: [RouterModule]
}) - Viduje src/app/app.component.html failą, pašalinkite esamą turinį ir pridėkite maršruto parinktuvo išvesties žymą.
<div klasė ="konteineris">
<maršrutizatorius-išvestis></router-outlet>
</div>
Kaip pereiti į naują puslapį HTML faile
Norėdami pereiti į puslapį HTML faile, naudokite inkaro žymą. Atribute href pridėkite kelią, kurį nurodėte maršrutų masyve.
- Viduje src/app/app.component.html failą, pridėkite dvi inkaro žymas prieš sudėtinį rodinį div. Tai leis jums naršyti tarp puslapių Pagrindinis ir Apie.
<div klasė ="naršymo juosta">
<klasė ="nuoroda" href="">Namai</a>
<klasė ="nuoroda" href="/about">Apie</a>
</div> - Pridėkite šiek tiek stiliaus src/app/app.component.css failą.
.konteineris {
marža: 48px 35%;
šrifto šeima: &citata;Arial&citata;, be serifo;
ekranas: lankstus;
lankstumo kryptis: stulpelyje;
išlyginti elementus: centras;
}.navbar {
fono spalva: tamsiai pilka;
kamšalas: 30px 50px;
ekranas: lankstus;
išlyginti elementus: centras;
šrifto šeima: be serifo;
}.nuoroda:pirmasis tipo {
paraštė-dešinė: 32px;
}.nuoroda {
spalva: baltas;
tekstas-dekoravimas: nė vienas;
šrifto dydis: 14pt;
šrifto svoris: drąsus;
} - Pridėkite šiek tiek stiliaus prie bendros puslapio paraštės src/styles.css.
kūnas {
marža: 0;
kamšalas: 0;
} - Komandinėje eilutėje arba terminale eikite į Angular programos šakninį aplanką. Paleiskite programą naudodami ng tarnauti komandą ir palaukite, kol ji baigs kompiliavimą.
ng tarnauti - Naršyklėje įveskite localhostURL į URL juostą, kad peržiūrėtumėte programą. Pagal numatytuosius nustatymus tai paprastai yra http://localhost: 4200/.
- Jūsų svetainė bus įkelta į pagrindinį puslapį.
- Galite pereiti į puslapį „Apie“ naršymo juostoje spustelėję nuorodą Apie.
Kaip pereiti į naują puslapį „TypeScript“ faile
Kol kas šioje demonstracijoje navigacijai užtikrinti naudojamos standartinės HTML nuorodos. Norėdami naršyti naudodami TypeScript failą, o ne HTML failą, galite naudoti router.navigate().
- Viduje src/app/app.component.html failą, pašalinkite inkaro žymas ir pakeiskite jas mygtukų žymomis. Šie mygtukai turės paspaudimo įvykį, kuris suaktyvins funkciją, vadinamą clickButton(). Kai iškviečiate funkciją clickButton(), kaip argumentą pridėkite URL maršruto kelią.
<mygtuko klasė="nuoroda" (spustelėkite) ="clickButton('')">Namai</button>
<mygtuko klasė="nuoroda" (spustelėkite) ="clickButton('/about')">Apie</button> - Pridėkite šiek tiek stiliaus mygtukų src/app/app.component.css failą.
mygtuką {
fono spalva: juodas;
kamšalas: 4px 8px;
žymeklį: rodyklė;
} - Viršuje src/app/app.component.ts failą, importuokite maršrutizatorių.
importuoti { Maršrutizatorius } iš '@kampinis/maršrutizatorius'; - Pridėkite naują konstruktorių „AppComponent“ klasėje ir įveskite maršrutizatorių pagal parametrus.
konstruktorius(privatus maršrutizatorius: maršrutizatorius) {
} - Po konstruktoriumi sukurkite naują funkciją, pavadintą clickButton(), kuri nukreips į naują puslapį pagal įvestą URL.
clickButton (kelias: eilutė) {
tai.router.navigate([kelias]);
} - Iš naujo paleiskite komandą ng serve komandų eilutėje arba terminale.
ng tarnauti - Naršyklėje eikite į savo svetainę. „Href“ dabar pakeistas dviem mygtukais.
- Spustelėkite ant Apie mygtuką. Jis bus nukreiptas į puslapį Apie.
Kelių puslapių kūrimas kampinėje programoje
Galite nukreipti tarp kelių kampinės programos puslapių naudodami maršruto parinkimą. Jei kiekviename puslapyje turite atskirus komponentus, maršruto parinkimo modulyje galite konfigūruoti savo maršrutų kelius.
Norėdami pereiti į kitą puslapį naudodami HTML failą, kaip maršruto kelią į tą puslapį naudokite inkaro žymą su atributu href. Norėdami pereiti į kitą puslapį naudodami TypeScript failą, galite naudoti metodą router.navigate().
Jei kuriate kampinę programą, galite naudoti kampines direktyvas. Tai leidžia komponento HTML faile naudoti dinaminius if teiginius, for-ciklus ar kitas logines operacijas.
