Անկյունային հիմունքներ. Ինչպես ավելացնել երթուղավորում

Մի էջից մյուսը անցնելը բավականին հիմնարար խնդիր է վեբ հավելվածի համար: Բարեբախտաբար, Angular-ը հիանալի աջակցություն ունի երթուղղման համար:

Եթե դուք ստեղծում եք Angular հավելված մի քանի էջերով, դուք պետք է օգտագործեք երթուղում՝ դրանց միջև նավարկելու համար: Դուք կարող եք դա անել՝ ստեղծելով երթուղիների ցանկ՝ երթուղային մոդուլի յուրաքանչյուր էջի համար ուղով:

Այնուհետև կարող եք ուղղորդել դեպի HTML ֆայլի այլ էջեր՝ օգտագործելով խարիսխ պիտակը: Դուք կարող եք նաև ուղղորդել դեպի այլ էջեր TypeScript ֆայլում՝ օգտագործելով router.navigate() մեթոդը:

Ինչպես ստեղծել նոր էջ անկյունային հավելվածում

Նախ, ստեղծեք նոր Angular հավելված: Կարող եք նաև օգտագործել գոյություն ունեցողը: Եթե դուք չգիտեք, թե ինչպես ստեղծել նոր Angular հավելված, կարող եք ծանոթանալ դրա մասին Angular-ում օգտագործվող այլ ներածական հասկացությունների հետ միասին:

1. Ստեղծեք նոր բաղադրիչ ձեր Angular հավելվածում՝ օգտագործելով ng generate բաղադրիչ հրամանը՝

   ng generate component home

2. Բացեք src/app/home/home.component.html ֆայլը և փոխարինեք ընթացիկ բովանդակությունը նոր բովանդակությամբ:

   <div class="content">
     <h2> Home </h2>
     <p>
       I am a photographer that does wedding photography. Check out my projects!
     </p>
     <div class="card">
       <h4> John & Amy </h4>
       <p> Blue Mountains, Australia </p>
     </div>
     <div class="card">
       <h4> Ross & Rach </h4>
       <p> Hunter Valley Gardens, Australia </p>
     </div>
   </div>

3. Լրացրեք src/app/home/home.component.css ֆայլը HTML բովանդակության ոճավորմամբ:

   .content {
     line-height: 2rem;
     font-size: 1.2em;
   }
    
   .card {
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
     width: 400px;
     padding: 16px;
     margin: 24px 0px;
     background-color: whitesmoke;
     font-family: sans-serif;
   }

4. Ստեղծեք մեկ այլ բաղադրիչ՝ օգտագործելով ng generate component հրամանը տերմինալում: Դուք կօգտագործեք նոր բաղադրիչը որպես մասին էջ:

   ng generate component about

5. Բացեք src/app/about/about.component.html ֆայլը և փոխարինեք ընթացիկ բովանդակությունը նոր բովանդակությամբ:

   <div class="content">
    <h2> About Me </h2>
    <p>
      I'm John, and I love taking photos. I have been taking photos for over 25 years. Visit me on my social media:
    </p>
    <a href=""> Facebook </a> 
    <a href=""> LinkedIn </a> 
    <a href=""> Instagram </a> 
   </div>
   

6. Լրացրեք src/app/about/about.component.css ֆայլը HTML բովանդակության ոճավորմամբ:

   .content {
     line-height: 2rem;
     font-size: 1.2em;
   }
   

Ինչպես նավարկել երկու էջերի միջև

Մի էջից մյուսը նավարկելու համար կարող եք օգտագործել երթուղի: Դուք կարող եք սա կարգավորել երթուղային ֆայլում: Այս օրինակը կունենա մեկ երթուղային ֆայլ ամբողջ հավելվածի համար, որը գտնվում է src/app/app-routing.module.ts-ում:

1. Եթե ձեր հավելվածն արդեն չունի հավելվածների երթուղավորման մոդուլի ֆայլ, կարող եք ստեղծել այն՝ օգտագործելով ng generate module հրամանը: Հրամանի տողում կամ տերմինալում նավարկեք հավելվածի արմատային թղթապանակ և գործարկեք հետևյալ հրամանը.

   ng generate module app-routing --module app --flat

2. Սա ձեր src/app թղթապանակում կստեղծի app-routing.module.ts ֆայլ:

   

3. Ֆայլի վերևում ավելացրեք լրացուցիչ ներմուծումներ Home և About բաղադրիչների համար: Համոզվեք, որ ներմուծում եք նաև RouterModule և CommonModule; ի վերջո, ձեր ներմուծման հայտարարությունները պետք է նման լինեն.

   import { CommonModule } from '@angular/common';
   import { Routes, RouterModule } from '@angular/router';
   import { HomeComponent } from './home/home.component';
   import { AboutComponent } from './about/about.component'; 

4. Ներմուծման տակ ավելացրեք նոր երթուղիների զանգված՝ պահելու այն ուղիները, որոնք դուք կօգտագործեք յուրաքանչյուր էջ երթուղղելիս:

   const routes: Routes = [
     { path: '', component: HomeComponent },
     { path: 'about', component: AboutComponent }
   ];

5. Փոխարինեք NgModule բլոկը հետևյալով, որն ավելացնում է RouterModule-ը ներմուծման և արտահանման զանգվածին։

   @NgModule({
     declarations: [],
     imports: [
       CommonModule,
       RouterModule.forRoot(routes)
     ],
     exports: [RouterModule]
   })

6. src/app/app.component.html ֆայլում հեռացրեք ընթացիկ բովանդակությունը և ավելացրեք երթուղիչի ելքի պիտակը:

   <div class="container">
     <router-outlet></router-outlet>
   </div>
   

Ինչպես նավարկել դեպի նոր էջ HTML ֆայլում

HTML ֆայլի էջը նավարկելու համար օգտագործեք խարիսխ պիտակը: href հատկանիշում ավելացրեք այն ուղին, որը դուք նշել եք երթուղիների զանգվածում:

1. src/app/app.component.html ֆայլում ավելացրեք երկու խարիսխ պիտակ մինչև բեռնարկղերի բաժանումը: Սա թույլ կտա նավարկելու Գլխավոր և Մասին էջերի միջև:

   <div class="navbar">
     <a class="link" href="">Home</a>
     <a class="link" href="/about">About</a>
   </div>
   

2. Ավելացրեք որոշակի ոճ src/app/app.component.css ֆայլում:

   .container {
     margin: 48px 35%;
     font-family: "Arial", sans-serif;
     display: flex;
     flex-direction: column;
     align-items: center;
   }
    
   .navbar {
     background-color: darkslategray;
     padding: 30px 50px;
     display: flex;
     align-items: center;
     font-family: sans-serif;
   }
    
   .link:first-of-type {
     margin-right: 32px;
   }
    
   .link {
     color: white;
     text-decoration: none;
     font-size: 14pt;
     font-weight: bold;
   }
   

3. Ավելացրեք որոշ ոճավորում էջի ընդհանուր լուսանցքին src/styles.css-ում:

   body {
     margin: 0;
     padding: 0;
   }

4. Հրամանի տողում կամ տերմինալում նավարկեք դեպի Angular հավելվածի արմատային պանակը: Գործարկեք հավելվածը՝ օգտագործելով ng serve հրամանը և սպասեք, որ այն ավարտի կոմպիլյացիան:

   ng serve

5. Բրաուզերում մուտքագրեք localhost URL URL-ի բարում՝ ձեր հավելվածը դիտելու համար: Լռելյայնորեն սա սովորաբար http://localhost:4200/ է:

6. Ձեր կայքը կբեռնվի Գլխավոր էջ:

   

7. Դուք կարող եք նավարկել «Մոտ» էջ՝ նավարկության տողում սեղմելով «Մոտ» հղումը:

   

Ինչպես անցնել նոր էջ TypeScript ֆայլում

Մինչ այժմ այս ցուցադրությունը օգտագործում է ստանդարտ HTML հղումներ՝ նավիգացիա ապահովելու համար: HTML ֆայլի փոխարեն TypeScript ֆայլի միջոցով նավարկելու համար կարող եք օգտագործել router.navigate():

1. src/app/app.component.html ֆայլում հեռացրեք խարիսխի պիտակները և փոխարինեք դրանք կոճակների պիտակներով: Այս կոճակները կունենան սեղմման իրադարձություն, որը գործարկում է clickButton(): Երբ զանգում եք clickButton() ֆունկցիան, որպես փաստարկ ավելացրեք URL երթուղու ուղին:

   <button class="link" (click)="clickButton('')">Home</button>
   <button class="link" (click)="clickButton('/about')">About</button>
   

2. Ավելացրեք որոշ ոճեր src/app/app.component.css ֆայլի կոճակներին:

   button {
     background-color: black;
     padding: 4px 8px;
     cursor: pointer;
   }

3. src/app/app.component.ts ֆայլի վերևում ներմուծեք երթուղիչը:

   import { Router } from '@angular/router'; 

4. Ավելացնել նոր կոնստրուկտոր AppComponent դասի ներսում և ներարկել երթուղիչը պարամետրերի շրջանակներում:

   constructor(private router: Router) {
   }

5. Կառուցիչի տակ ստեղծեք նոր գործառույթ, որը կոչվում է clickButton(), որը նավարկելու է դեպի նոր էջ՝ հիմնվելով ձեր փոխանցած URL-ի վրա:

   clickButton(path: string) {
       this.router.navigate([path]);
   } 

6. Կրկին գործարկեք ng serve հրամանը հրամանի տողում կամ տերմինալում:

   ng serve

7. Նավարկեք ձեր կայք բրաուզերում: href-ն այժմ փոխարինվել է երկու կոճակով:

   

8. Սեղմեք Մոտ կոճակի վրա: Այն կուղղվի դեպի «Մոտ» էջ:

   

Մի քանի էջերի ստեղծում անկյունային հավելվածում

Դուք կարող եք մի քանի էջերի միջև երթուղի անցնել Angular հավելվածում, օգտագործելով երթուղիչ: Եթե դուք ունեք առանձին բաղադրիչներ յուրաքանչյուր էջի համար, կարող եք կարգավորել ձեր երթուղիների ուղիները երթուղային մոդուլում:

HTML ֆայլի միջոցով մեկ այլ էջ նավարկելու համար օգտագործեք խարիսխ պիտակ՝ href հատկանիշով որպես այդ էջի երթուղի: TypeScript ֆայլի միջոցով մեկ այլ էջ նավարկելու համար կարող եք օգտագործել router.navigate() մեթոդը:

Եթե դուք կառուցում եք Angular հավելված, կարող եք օգտագործել Angular հրահանգները: Սրանք թույլ են տալիս օգտագործել դինամիկ if-հայտարարություններ, for-loops կամ այլ տրամաբանական գործողություններ բաղադրիչի HTML ֆայլում: