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

saber

3 سال پیش

امتیاز دهید post

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

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

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

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

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

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

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

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

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 برای حرکت به صفحه مورد نیاز استفاده کنید.

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

مرحله Application Using npm

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

Inventory Link

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

Back to Products

منبع.

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

امتیاز دهید post

برچسب ها : آموزش انگولار 2 آموزش طراحی وب سایت

نویسنده مطلب saber

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

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

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

دیدگاه شما

بدون دیدگاه

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

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

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه