آموزش ناوبری در انگولار ۲

آموزش ناوبری در انگولار ۲

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش ناوبری در انگولار ۲ خواهیم پرداخت.

در انگولار ۲ امکان انجام ناوبری دستی نیز وجود دارد. در ادامه مراحل آمده است.

مرحله ۱ – کد زیر را به فایل Inventory.component.ts اضافه کنید.

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

@Component ({  
   selector: 'my-app',  
   template: 'Inventory 
   <a class = "button" (click) = "onBack()">Back to Products</a>' 
})  

export class AppInventory {  
   constructor(private _router: Router){} 

   onBack(): void { 
      this._router.navigate(['/Product']); 
   } 
}

نکات زیر باید در مورد برنامه فوق ذکر شود –

• یک تگ html که دارای تابع onBack است تگ گذاری شده به رویداد کلیک را اعلام کنید. بنابراین هنگامی که کاربر روی این مورد کلیک می کند، به صفحه محصولات هدایت می شود.
• در تابع onBack، از router.navigate برای حرکت به صفحه مورد نیاز استفاده کنید.

مرحله ۲ – اکنون تمام کد را ذخیره کرده و برنامه را با استفاده از npm اجرا کنید. به مرورگر بروید، خروجی زیر را مشاهده خواهید کرد.

مرحله

۳ – روی پیوند موجودی کلیک کنید.

مرحله ۴ – روی پیوند “Back to products” کلیک کنید، خروجی زیر را دریافت خواهید کرد که شما را به صفحه محصولات باز می گرداند.

منبع.

لیست جلسات قبل آموزش آنگولار ۲

1. آموزش انگولار ۲
2.  مرور کلی آنگولار ۲
3. آموزش محیط انگولار ۲ 
4. آموزش Hello World در انگولار ۲
5. آموزش ماژول ها در انگولار ۲
6. آموزش معماری در انگولار ۲
7. آموزش کامپوننت ها در انگولار ۲
8. آموزش قالب ها در انگولار ۲
9. آموزش دستورالعمل ها در انگولار ۲
10. آموزش متادیتا در انگولار ۲
11. آموزش اتصال داده ها در انگولار ۲
12. آموزش عملیات CRUD با استفاده از HTTP در انگولار ۲
13. آموزش مدیریت خطا در انگولار ۲
14. آموزش مسیریابی در انگولار ۲