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

  • چهارشنبه 28 آگوست 2019
  • بازدید ۲۳۶ نفر

angular7 routing 6838 تصویر

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

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

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

در کد فوق ما AppRoutingModule را به بخش imports ها اضافه کرده ایم.

در زیر محتوای فایل app-routing.module را مشاهده می کنید:

فایل فوق هنگام تنظیم مسیریابی برای پروژه به صورت خودکار تولید می شود. اگر این فایل ایجاد نشود، باید آن را خودتان ایجاد کنید. در کد فوق Routes, RouterModule از @angular/router اضافه شده اند. Routes آرایه ای از مسیرهای ثابت است که پروژه به آن ها نیاز دارد.

مسیرهای ثابت همانطور که در NgModule نشان داده شده است به RouterModule داده می شوند. به منظور نمایش جزئیات مسیریابی به کاربر، باید از دستورالعمل <router-outlet> استفاده شود.

مانند نمونه زیر (app.component.html):

در ادامه ما دو کامپوننت جدید با نام های Home و Contact Us ایجاد و با استفاده از مسیریابی بین آنها پیمایش می کنیم.

کامپوننت Home

با استفاده از دستور زیر کامپوننت مورد نظر را ایجاد می کنیم:

خروجی دستور:

کامپوننت Contact Us

با استفاده از دستور زیر کامپوننت مورد نظر را ایجاد می کنیم:

خروجی دستور:

کار ایجاد کامپوننت های جدید تمام شد. در زیر می توانید جزئیات مربوط به کامپوننت های جدید را مشاهده کنید (app.module.ts):

حال جزئیات مسریابی را به فایل app-routing.module اضافه می کنیم.

همانطور که مشاهده کردید کامپوننت هایی که برای مسیریابی لازم هستند هم در app.module.ts وارد شده اند و هم در app-routing.module.ts برای بهتر کردن کار می توانیم آنها را در یک جا وارد کنیم.

برای این کار ما یک آرایه از کامپوننت های مسیریابی را در فایل app-routing.module.ts ایجاد و آن را export می کنیم. سپس در فایل app.module.ts آن آرایه را import می کنیم. در این صورت ما می توانیم به آن کامپوننت دسترسی داشته باشیم.

محتوای تغییر یافته فایل app-routing.module.ts:

همانطور که مشاهده می کنید، آرایه RoutingComponent در فایل app.module.ts وارد شده است:

تا اینجا کار ایجاد مسیرها تمام شده است. حال باید آن ها به کاربر نمایش دهیم.

در داخل app.component.html دو دکمه ایجاد و مسیرهای که ساخته ایم را به آن ها می دهیم:

خروجی در مرورگر:

angular7 routing 6838 1 تصویر

حال برای بهتر کردن ظاهر برنامه استایل زیر را به app.component.css اضافه کنید:

خروجی بعد از استایل دادن:

angular7 routing 6838 2 تصویر

اگر بر روی دکمه Home کلیک کنید خروجی زیر را مشاهده خواهید کرد:

angular7 routing 6838 3 تصویر

و اگر بر روی دکمه Contact Us کلیک کنید خروجی زیر را مشاهده خواهید کرد:

angular7 routing 6838 6 تصویر

همانطور که مشاهده می کنید هنگام کلیک بر روی یکی از دکمه های فوق آدرس صفحه در آدرس بار مرورگر نیز تغییر می کند.

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

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