Ha több oldalas Angular alkalmazást hoz létre, akkor az útválasztást kell használnia a köztük való navigáláshoz. Ezt úgy teheti meg, hogy az útválasztási modulban minden oldalhoz létrehoz egy útvonallistát az útvonallal.
Ezután egy horgonycímke segítségével más oldalakra irányíthat át egy HTML-fájlon belül. A router.navigate() metódus használatával a TypeScript-fájlon belül más oldalakra is átirányíthat.
Hogyan hozzunk létre új oldalt egy szögletes alkalmazásban
Először hozzon létre egy új Angular alkalmazást. Használhat egy meglévőt is. Ha nem ismeri az új Angular alkalmazás létrehozását, másokkal együtt megismerheti azt Angularban használt bevezető fogalmak.
-
Hozzon létre egy új összetevőt az Angular alkalmazásban használni a ng összetevőt generál parancs:
ng generál komponens home - Nyissa meg a src/app/home/home.component.html fájlt, és cserélje ki az aktuális tartalmat új tartalomra.
<div class="tartalom">
<h2> itthon </h2>
<p>
Esküvői fotózással foglalkozó fotós vagyok. Tekintse meg projektjeimet!
</p>
<div class="kártya">
<h4> János & Amy </h4>
<p> Blue Mountains, Ausztrália </p>
</div>
<div class="kártya">
<h4> Ross & Rach </h4>
<p> Hunter Valley Gardens, Ausztrália </p>
</div>
</div> - Népesíteni a src/app/home/home.component.css fájl a HTML-tartalom stílusával.
.tartalom {
vonalmagasság: 2rem;
betűméret: 1.2em;
}.kártya {
doboz-árnyék: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
szélesség: 400px;
párnázás: 16px;
árrés: 24px 0px;
háttérszín: fehér füst;
betűtípus család: sans-serif;
} - Hozzon létre egy másik összetevőt a ng összetevőt generál parancsot a terminálban. Az új komponenst információs oldalként fogja használni.
ng komponens generálása kb - Nyissa meg a src/app/about/about.component.html fájlt, és cserélje ki az aktuális tartalmat új tartalomra.
<div class="tartalom">
<h2> Rólam </h2>
<p>
én'John vagyok, és szeretek fotózni. Több mint 25 éve fotózok. Látogass meg a közösségi oldalamon:
</p>
<a href=""> Facebook </a><br>
<a href=""> LinkedIn </a><br>
<a href=""> Instagram </a><br>
</div> - Népesíteni a src/app/about/about.component.css fájl a HTML-tartalom stílusával.
.tartalom {
vonalmagasság: 2rem;
betűméret: 1.2em;
}
Hogyan navigáljunk a két oldal között
Az útvonalválasztás segítségével navigálhat egyik oldalról a másikra. Ezt egy útválasztó fájlban konfigurálhatja. Ebben a példában egy útválasztó fájl lesz a teljes alkalmazáshoz, amely a következő helyen található: src/app/app-routing.module.ts.
- Ha az alkalmazás még nem rendelkezik az alkalmazás-útválasztó modul fájljával, létrehozhat egyet a következővel ng generál modult parancs. Parancssorban vagy terminálban keresse meg az alkalmazás gyökérmappáját, és futtassa a következő parancsot:
ng generál modul app-routing --module app --flat - Ezzel létrehoz egy app-routing.module.ts fájlt az Ön mappájában src/app mappát.
- A fájl tetején adjon hozzá további importálást a Kezdőlap és a Névjegy összetevőkhöz. Győződjön meg arról, hogy importálja a RouterModule és a CommonModule elemeket is; végül az importálási utasításoknak így kell kinézniük:
import { CommonModule } tól től '@szögletes/közös';
import { Útvonalak, RouterModule } tól től '@angular/router';
import { HomeComponent } tól től './home/home.component';
import { AboutComponent } tól től './about/about.component'; - Az importálások alatt adjon hozzá egy új útvonaltömböt, amely tárolja azokat az útvonalakat, amelyeket az egyes oldalakra való irányítás során fog használni.
const útvonalak: Routes = [
{ pálya: '', összetevő: HomeComponent },
{ pálya: 'ról ről', összetevő: AboutComponent }
]; - Cserélje ki az NgModule blokkot a következőre, amely hozzáadja a RouterModule-t az importálási és exportálási tömbhöz.
@NgModule({
nyilatkozatok: [],
import: [
CommonModule,
RouterModule.forRoot (útvonalak)
],
exportál: [RouterModule]
}) - Ban,-ben src/app/app.component.html fájlt, távolítsa el az aktuális tartalmat, és adja hozzá a router-outlet címkét.
<div class="tartály">
<router-kimenet></router-outlet>
</div>
Hogyan lehet navigálni az új oldalra egy HTML-fájlban
Ha egy HTML-fájlban egy oldalra szeretne navigálni, használja a horgonycímkét. A href attribútumhoz adja hozzá a routes tömbben megadott elérési utat.
- Ban,-ben src/app/app.component.html fájlt, adjon hozzá két horgonycímkét a div. Ezzel navigálhat a Kezdőlap és a Névjegy oldal között.
<div class="navigációs sáv">
<egy osztály="link" href="">itthon</a>
<egy osztály="link" href="/about">Ról ről</a>
</div> - Adjon hozzá némi stílust a src/app/app.component.css fájlt.
.tartály {
árrés: 48px 35%;
betűtípus család: &idézet;Arial&idézet;, sans-serif;
kijelző: Flex;
flex-irány: oszlop;
align-ites: központ;
}.navbar {
háttérszín: sötét palaszürke;
párnázás: 30px 50px;
kijelző: Flex;
align-ites: központ;
betűtípus család: sans-serif;
}.link:típuselső {
margó-jobb: 32px;
}.link {
szín: fehér;
szöveg-dekoráció: egyik sem;
betűméret: 14pt;
font-weight: bátor;
} - Adjon hozzá némi stílust az oldal általános margójához src/styles.css.
test {
árrés: 0;
párnázás: 0;
} - A parancssorban vagy terminálban lépjen az Angular alkalmazás gyökérmappájába. Futtassa az alkalmazást a ng szolgálni parancsot, és várja meg, amíg befejezi a fordítást.
ng szolgálni - Egy böngészőben írja be a localhostURL címet az URL-sávba az alkalmazás megtekintéséhez. Alapértelmezés szerint ez általában http://localhost: 4200/.
- Webhelye betöltődik a kezdőlapra.
- A Névjegy oldalra a navigációs sáv Névjegy hivatkozására kattintva navigálhat.
Hogyan lehet navigálni az új oldalra egy TypeScript-fájlban
Eddig ez a demó szabványos HTML hivatkozásokat használ a navigáció biztosítására. Ha a HTML-fájl helyett TypeScript-fájl használatával szeretne navigálni, használhatja a router.navigate().
- Ban,-ben src/app/app.component.html fájlt, távolítsa el a horgonycímkéket, és cserélje ki őket gombcímkékre. Ezeknek a gomboknak lesz egy kattintási eseménye, amely a clickButton() nevű függvényt indítja el. A clickButton() függvény meghívásakor adja hozzá az URL útvonal útvonalát argumentumként.
<gomb osztály="link" (kattintás)="clickButton('')">itthon</button>
<gomb osztály="link" (kattintás)="clickButton('/about')">Ról ről</button> - Adjon hozzá némi stílust a gombokhoz src/app/app.component.css fájlt.
gomb {
háttérszín: fekete;
párnázás: 4px 8px;
kurzor: mutató;
} - A tetején a src/app/app.component.ts fájlt, importálja az útválasztót.
import { Router } tól től '@angular/router'; - Adjon hozzá egy új konstruktort az AppComponent osztályba, és adja meg az útválasztót a paraméterek között.
konstruktőr(privát útválasztó: Router) {
} - A konstruktor alatt hozzon létre egy új, clickButton() nevű függvényt, amely a megadott URL alapján az új oldalra navigál.
clickButton (elérési út: string) {
ez.router.navigate([útvonal]);
} - Futtassa újra az ng serve parancsot a parancssorban vagy terminálban.
ng szolgálni - Keresse meg webhelyét egy böngészőben. A href helyett most két gomb található.
- Kattintson a Ról ről gomb. Ez a Névjegy oldalra fog irányítani.
Több oldal létrehozása egy szögletes alkalmazásban
Egy Angular alkalmazáson belül az útválasztás használatával több oldalt is átirányíthat. Ha minden oldalhoz külön összetevők vannak, az útvonaltervező modulon belül konfigurálhatja az útvonalak elérési útját.
Ha egy HTML-fájlon keresztül egy másik oldalra szeretne navigálni, használjon egy horgonycímkét a href attribútummal az oldalhoz vezető útvonalként. Ha egy TypeScript-fájlon keresztül egy másik oldalra szeretne navigálni, használja a router.navigate() metódust.
Ha egy Angular alkalmazást épít, használhat Angular direktívákat. Ezek lehetővé teszik dinamikus if-utasítások, for-loopok vagy egyéb logikai műveletek használatát egy összetevő HTML-fájljában.
