مسیریابی (Routing) در انگولار ۶ – آموزش Angular 6

  • دوشنبه ۱ بهمن ۱۳۹۷
  • بازدید ۴۸۱ نفر

angular 6 routing 5632 تصویر

مسیریابی (Routing) در انگولار ۶

به طور کلی منظور از مسیریابی (Routing) در انگولار، جا به جا شدن بین صفحات مختلف است. تا به حال سایت های زیادی را دیده اید که شما را با یک لینک به صفحه دیگر منتقل می کنند. همان کار را می توان با استفاده از مسیریابی انجام داد. همانطور که در بخش های قبلی توضیح داده شد، یک کامپوننت جدید ایجاد کنید تا نحوه استفاده از مسیریابی را بررسی کنیم.

در فایل app.module.ts مانند نمونه زیر ماژول مربوط به مسیریابی را اضافه کنید:

در کد فوق ما ماژول مربوط به مسیریابی را از angular/router وارد کرده و در RouterModule قرار داده ایم. سپس آن را به صورت زیر به بخش imports اضافه کرده ایم:

RouterModule به forRoot اشاره دارد که یک ورودی به صورت آرایه می گیرد، که به نوبه خود شیء مسیر و مولفه را دارد. مسیر نام روتر است و جزء نام کلاس است، به عنوان مثال مولفه ایجاد شده است.

RouterModule به forRoot اشاره دارد که یک ورودی از نوع آرایه می گیرد و این آرایه خودش یک شیء از مسیر و کامپوننت را به عنوان ورودی می گیرد.  مقداری که به path داده می شود، نام router را مشخص می کند و مقداری هم که به component داده می شود، کلاس کامپوننت را مشخص می کند.

محتوای فایل New-cmp.component.ts:

محتوای فایل New-cmp.component.html:

حال برای آن که محتوای فایل html در هنگام کلیک بر روی لینک نمایش داده شود، فایل app.component.html را به صورت زیر تغییر دهید:

در کد فوق ما یک لینک با صفت routerLink و مقدار “new-cmp” اضافه کردیم که به مسیر تعریف شده در فایل app.module.ts اشاره می کند. همانطور که در کد بالا مشاهده می کنید، تگ <router-outlet> </router-outlet> نیز اضافه شده است. این تگ تضمین می کند زمانی که کاربر بر روی لینک کلیک کند، محتوای فایل new-cmp.component.html نمایش داده شود.

خروجی برنامه:

angular 6 routing 5632 1 تصویر

بعد از کلیک کردن بر روی لینک:

angular 6 routing 5632 2 تصویر

حال اگر به آدرس برنامه در آدرس بار مرورگر توجه کنید، مشاهده می کنید که new-cmp نیز به انتهای آن اضافه شده است. این همان مسیری است که در فایل app.module.ts به عنوان path برای router مشخص کردیم. زمانی که کاربر بر روی لینک کلیک می کند، صفحه مرورگر refresh نمی شود و محتوا بدون هیچ گونه reload کردن نمایش داده می شود.

ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

هیچ نظری ثبت نشده است