הגדרה בסיסית לאנגולר ראוטינג

כאשר אנחנו מנווטים בתוך אפליקצית דף אחד (SPA) זה אומר שיש דף אחד (INDEX) והסקריט מעלה את ה"דף" הנכון שהוא בעצמו רכיב כמו שאר הרכיבים שמרכיבים אותו.

בגלל שאין ניווט אמיתי שמתייחס לדפי HTML שונים אנחנו צריכים מנגנון שיחליף את הניווט של הדפדפן הרגיל.

זהו מנגנון ה-routing של אנגולר, הוא יכול להיות בקובץ משלו או בתוך קובץ המודול.

כאשר נגשים לעבוד איתו, הוא נראה כך:

RouterModule.forRoot([
   // כאן נוסיף את ההפניות לרכיבים
  ]),

או בקובץ משלו:

const routes: Routes = [
    // כאן נוסיף את ההפניות לרכיבים
];

עכשיו נוסיף את ההגדרות הבסיסיות כדי שהראוטינג יעבוד נכון:

const routes: Routes = [
	{ path: 'crisis-center', component: CrisisListComponent },
  	{ path: 'heroes', component: HeroListComponent },
  	{ path: '',   redirectTo: '/heroes', pathMatch: 'full' },
	{ path: '**', component: PageNotFoundComponent }
];

חשוב לדעת שהסדר כן חשוב כאן.

בהתחלה כל ההפניות לדפים שאנחנו מעוניינים שיוכלו לגלוש אליהם בעזרת ה-URL

אחרי זה יגיע הפניה ריקה שתעשה הפניה לאחד הדפים (בדרך כלל דף הבית) כברירת מחדל.

בסוף נאפיין גם את כל השאר (**) , מה שהשורה האחרונה אומרת זה שאם שום path לא התאים אז תעלה רכיב מסויים ספציפי, במקרה שלנו רכיב שנקרא PageNotFoundComponent שזה רכיב שיציג על המסך שהדף לא נימצא.

אנחנו יכולים להפנות לאן שאנחנו רוצים, אבל זיכרו שהוא חייב להיות אחרון בגלל שהוא מתאים לכל הבקשות שיכולות להגיע מה-URL.

במידה שאנחנו רוצים להעביר מידע ב-URL , נעשה את זה כך:

{ path: 'hero/:id', component: HeroDetailComponent }

ה-URL יראה כך:

https://mySite.com/hero/1

אם נרצה נוכל בצורה זו לשרשר עוד נתונים ונקרא להם בדף hero על פי המפתחות שלהם, במקרה הזה, המפתח הוא id.

כדי לנווט בלחיצה על לינק (anchor) עם תוספת של ה-ID , נעשה את זה כך:

<a [routerLink]="['/hero', hero.id]"></a>

שימו לב! יש הבדל בין routerLink לבין href של תגית a.

• href = יעשה ניווט אמיתי וטעינה מחדש לדף כמו לינק רגיל
• routerLink = ישתמש ב-routing של אנגולר ולא יבוצע טעינה מחדש לדף

במידה שנרצה להעביר את המידע בראוטר עצמו, נעשה את זה כך:

{ path: 'hero/:id', component: HeroDetailComponent, data:{name:'Admin'} }

בצד הרכיב, נרשם למידע כך:

private sub: Subscription;
  constructor(private activatedRoute: ActivatedRoute) { }

  ngOnInit() {
    this.sub = this.activatedRoute
      .data
      .subscribe(d => console.log(d));
  }
  ngOnDestroy() {
    this.sub.unsubscribe();
  }

ברגע שמופעל הראוטינג, הפונקציה תבדוק אם מגיע איתו גם מידע ובמידה שכן נוכל לקבל אותו כאובייקט בשורה מספר 7 ב-"d", אם נרצה לקבל ערך של מפתח ספציפי נוכל לעשות את זה כך: d.name ונקבל "Admin"

פוסטים קשורים:

SEO| שינוי כותרת של הדף באנגולר מדריך אנגולר | reactive forms – היכרות בסיסית עם AbstractControl טיפים וטריקים באנגולר (tips & tricks) מדריך אנימציות באנגולר