Ja veidojat Angular lietojumprogrammu ar vairākām lapām, jums ir jāizmanto maršrutēšana, lai pārvietotos starp tām. To var izdarīt, izveidojot maršrutu sarakstu ar ceļu katrai maršrutēšanas moduļa lapai.
Pēc tam varat novirzīt uz citām HTML faila lapām, izmantojot enkura tagu. Varat arī maršrutēt uz citām lapām TypeScript failā, izmantojot metodi router.navigate().
Kā izveidot jaunu lapu leņķiskā lietojumprogrammā
Vispirms izveidojiet jaunu Angular lietojumprogrammu. Varat arī izmantot esošu. Ja nezināt, kā izveidot jaunu Angular lietotni, varat uzzināt par to kopā ar citām ievada jēdzieni, kas tiek izmantoti Angular.
-
Izveidojiet jaunu komponentu savā Angular lietotnē izmantojot ng ģenerēt komponentu komanda:
ng ģenerēt komponentu sākumlapu - Atveriet src/app/home/home.component.html failu un aizstāt pašreizējo saturu ar jaunu.
<div klase="saturu">
<h2> Mājas </h2>
<lpp>
Esmu fotogrāfs, kas fotografē kāzas. Apskati manus projektus!
</lpp>
<div klase="karti">
<h4> Džons & Eimija </h4>
<lpp> Zilie kalni, Austrālija </lpp>
</div>
<div klase="karti">
<h4> Ross & Račs </h4>
<lpp> Hantera ielejas dārzi, Austrālija </lpp>
</div>
</div> - Aizpildiet src/app/home/home.component.css fails ar HTML satura stilu.
.saturs {
līnijas augstums: 2rem;
fonta izmērs: 1.2em;
}.karte {
kaste-ēna: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
platums: 400px;
polsterējums: 16px;
starpība: 24px 0px;
fona krāsa: baltie dūmi;
fontu ģimene: sans serif;
} - Izveidojiet citu komponentu, izmantojot ng ģenerēt komponentu komanda terminālī. Jūs izmantosit jauno komponentu kā lapu par.
ng ģenerēt komponentu par - Atveriet src/app/about/about.component.html failu un aizstāt pašreizējo saturu ar jaunu.
<div klase="saturu">
<h2> Par mani </h2>
<lpp>
es'es Džonu, un man patīk fotografēt. Es fotografēju vairāk nekā 25 gadus. Apmeklējiet mani sociālajos tīklos:
</lpp>
<a href=""> Facebook </a><br>
<a href=""> LinkedIn </a><br>
<a href=""> Instagram </a><br>
</div> - Aizpildiet src/app/about/about.component.css fails ar HTML satura stilu.
.saturs {
līnijas augstums: 2rem;
fonta izmērs: 1.2em;
}
Kā pārvietoties starp divām lapām
Varat izmantot maršrutēšanu, lai pārvietotos no vienas lapas uz otru. To var konfigurēt maršrutēšanas failā. Šajā piemērā būs viens maršrutēšanas fails visai lietotnei, kas atrodas src/app/app-routing.module.ts.
- Ja jūsu lietotnei vēl nav lietotņu maršrutēšanas moduļa faila, varat to ģenerēt, izmantojot ng ģenerēt moduli komandu. Komandrindā vai terminālī pārejiet uz lietojumprogrammas saknes mapi un palaidiet šādu komandu:
ng ģenerēt moduļa app-routing --module app --flat - Tādējādi jūsu kontā tiks izveidots fails app-routing.module.ts src/app mapi.
- Faila augšdaļā pievienojiet papildu importēšanu komponentiem Sākums un Par. Pārliecinieties, ka importējat arī RouterModule un CommonModule; galu galā jūsu importēšanas paziņojumiem vajadzētu izskatīties šādi:
imports { CommonModule } no '@leņķisks/kopīgs';
imports { Routes, RouterModule } no '@leņķiskais/maršrutētājs';
imports { HomeComponent } no './home/home.component';
imports { AboutComponent } no './about/about.component'; - Zem importēšanas pievienojiet jaunu maršrutu masīvu, lai saglabātu ceļus, kurus izmantosit, maršrutējot uz katru lapu.
konst maršruti: maršruti = [
{ ceļš: '', komponents: HomeComponent },
{ ceļš: 'par', komponents: AboutComponent }
]; - Aizstājiet NgModule bloku ar šādu, kas pievieno RouterModule importēšanas un eksporta masīvam.
@NgModule({
deklarācijas: [],
imports: [
CommonModule,
RouterModule.forRoot (maršruti)
],
eksports: [RouterModule]
}) - Iekš src/app/app.component.html failu, noņemiet pašreizējo saturu un pievienojiet maršrutētāja kontaktligzdas tagu.
<div klase="konteiners">
<maršrutētājs-kontaktligzda></router-outlet>
</div>
Kā HTML failā pāriet uz jauno lapu
Lai pārietu uz lapu HTML failā, izmantojiet enkura tagu. Atribūtā href pievienojiet ceļu, ko norādījāt maršrutu masīvā.
- Iekš src/app/app.component.html failu, pievienojiet divus enkura tagus pirms konteinera div. Tas ļaus jums pārvietoties starp lapām Sākums un Par.
<div klase="navigācijas josla">
<klase ="saite" href="">Mājas</a>
<klase ="saite" href="/about">Par</a>
</div> - Pievienojiet stilam src/app/app.component.css failu.
.konteiners {
starpība: 48px 35%;
fontu ģimene: &citāts;Arial&citāts;, sans serif;
displejs: flex;
flex-virziens: kolonna;
izlīdzināt vienumus: centrs;
}.navbar {
fona krāsa: tumši pelēks;
polsterējums: 30px 50px;
displejs: flex;
izlīdzināt vienumus: centrs;
fontu ģimene: sans serif;
}.saite:pirmais {
mala-labais: 32px;
}.saite {
krāsa: balts;
teksta dekorēšana: neviens;
fonta izmērs: 14pt;
fonta svars: treknrakstā;
} - Pievienojiet stilu kopējai lapas piemalei src/styles.css.
ķermenis {
starpība: 0;
polsterējums: 0;
} - Komandu uzvednē vai terminālī pārejiet uz lietojumprogrammas Angular saknes mapi. Palaidiet lietojumprogrammu, izmantojot ng kalpot komandu un gaidiet, līdz tā pabeidz kompilēšanu.
ng kalpot - Lai skatītu savu lietojumprogrammu, pārlūkprogrammas URL joslā ierakstiet vietni localhostURL. Pēc noklusējuma tas parasti ir http://localhost: 4200/.
- Jūsu vietne tiks ielādēta sākumlapā.
- Varat pāriet uz lapu Par, navigācijas joslā noklikšķinot uz saites Par.
Kā TypeScript failā pāriet uz jauno lapu
Līdz šim šajā demonstrācijā navigācijas nodrošināšanai tiek izmantotas standarta HTML saites. Lai pārvietotos, izmantojot TypeScript failu, nevis HTML failu, varat izmantot router.navigate().
- Iekš src/app/app.component.html failu, noņemiet enkura tagus un aizstājiet tos ar pogu tagiem. Šīm pogām būs klikšķa notikums, kas aktivizē funkciju clickButton(). Izsaucot funkciju clickButton(), pievienojiet URL maršruta ceļu kā argumentu.
<pogas klase="saite" (noklikšķināt)="clickButton('')">Mājas</button>
<pogas klase="saite" (noklikšķināt)="clickButton('/about')">Par</button> - Pievienojiet kādu stilu pogām sadaļā src/app/app.component.css failu.
pogu {
fona krāsa: melns;
polsterējums: 4px 8px;
kursors: rādītājs;
} - Augšpusē src/app/app.component.ts failu, importējiet maršrutētāju.
imports { Maršrutētājs} no '@leņķiskais/maršrutētājs'; - Pievienojiet jaunu konstruktoru AppComponent klasē un ievadiet maršrutētāju parametros.
konstruktors(privātais maršrutētājs: maršrutētājs) {
} - Zem konstruktora izveidojiet jaunu funkciju ar nosaukumu clickButton(), kas pāries uz jauno lapu, pamatojoties uz jūsu ievadīto URL.
clickButton (ceļš: virkne) {
šis.router.navigate([ceļš]);
} - Atkārtoti palaidiet komandu ng serve komandrindā vai terminālī.
ng kalpot - Pārlūkprogrammā pārejiet uz savu vietni. Tagad href ir aizstāts ar divām pogām.
- Noklikšķiniet uz Par pogu. Tas tiks novirzīts uz lapu Par.
Vairāku lapu izveide leņķiskā lietojumprogrammā
Varat maršrutēt starp vairākām lapām lietojumprogrammā Angular, izmantojot maršrutēšanu. Ja katrai lapai ir atsevišķi komponenti, maršrutēšanas modulī varat konfigurēt ceļus saviem maršrutiem.
Lai pārietu uz citu lapu, izmantojot HTML failu, izmantojiet enkura tagu ar atribūtu href kā maršrutēšanas ceļu uz šo lapu. Lai pārietu uz citu lapu, izmantojot TypeScript failu, varat izmantot metodi router.navigate().
Ja veidojat Angular lietojumprogrammu, varat izmantot Angular direktīvas. Tie ļauj izmantot dinamiskus if-paziņojumus, for-cilpas vai citas loģiskas darbības komponenta HTML failā.