در پروژه‌های واقعی Angular تقریباً همیشه با سناریوهایی روبرو می‌شویم که نیاز به ارسال داده از طریق URL یا تغییر مسیر کاربران داریم. برای مثال:

• باز کردن صفحه جزئیات یک محصول
• نمایش پروفایل یک کاربر با شناسه مشخص
• هدایت کاربر به داشبورد بعد از ورود به حساب کاربری
• انتقال کاربر به صفحه دیگری پس از ثبت فرم

برای پیاده‌سازی این قابلیت‌ها در Angular از دو مفهوم مهم استفاده می‌کنیم:

• Route Parameters
• Programmatic Navigation با Router.navigate()

در این آموزش یاد می‌گیریم Route Parameters در Angular چیست، چگونه مسیرهای داینامیک تعریف کنیم و چگونه کاربران را به‌صورت برنامه‌نویسی‌شده بین صفحات مختلف جابه‌جا کنیم.

Route Parameters در Angular چیست؟

Route Parameter مقداری داینامیک است که داخل URL قرار می‌گیرد و به ما اجازه می‌دهد اطلاعات موردنیاز را به یک صفحه ارسال کنیم.

برای مثال:

/products/5
/products/12
/products/100

در مثال بالا مقدار انتهایی URL یک Route Parameter محسوب می‌شود.

استفاده از Route Parameters باعث می‌شود بتوانیم با یک کامپوننت، اطلاعات مختلفی را بر اساس شناسه دریافت‌شده نمایش دهیم.

تعریف Route Parameter در Angular

برای ایجاد مسیر داینامیک باید از علامت : استفاده کنیم.

import { Routes } from '@angular/router';
import { ProductsComponent } from './products/products.component';
import { ProductDetailsComponent } from './product-details/product-details.component';

export const appRoutes: Routes = [
  { path: 'products', component: ProductsComponent },
  { path: 'products/:id', component: ProductDetailsComponent }
];

در این مثال:

• /products لیست محصولات را نمایش می‌دهد.
• /products/:id صفحه جزئیات هر محصول را نمایش می‌دهد.

علامت :id نشان می‌دهد که مقدار این بخش از URL داینامیک است.

ساخت لینک با Route Parameter

برای ارسال شناسه محصول می‌توانیم از routerLink استفاده کنیم.

<a [routerLink]="['/products', item.id]">
  مشاهده محصول
</a>

اگر مقدار item.id برابر 5 باشد، URL زیر تولید می‌شود:

/products/5

این روش بهترین راه برای ایجاد لینک‌های داینامیک در Angular است.

دریافت Route Parameter در Angular

بعد از ورود کاربر به صفحه مقصد باید مقدار پارامتر را دریافت کنیم.

دریافت پارامتر با Snapshot

import { ActivatedRoute } from '@angular/router';
import { inject } from '@angular/core';

export class ProductDetailsComponent {

  route = inject(ActivatedRoute);

  ngOnInit() {
    const id = this.route.snapshot.paramMap.get('id');
    console.log('Product ID:', id);
  }
}

این روش زمانی مناسب است که کامپوننت هنگام تغییر مسیر مجدداً ساخته شود.

دریافت پارامتر با Observable

در پروژه‌های حرفه‌ای بهتر است از الگوی Reactive استفاده کنیم.

product$ = this.route.paramMap.pipe(
  map(params => params.get('id')),
  filter((id): id is string => id !== null),
  switchMap(id => this.productsService.getProductById(+id))
);

مزایای این روش:

• سازگار با RxJS
• مناسب برای تغییر پارامتر بدون Destroy شدن کامپوننت
• عملکرد بهتر با AsyncPipe
• جلوگیری از مدیریت دستی Subscription

Navigate Programmatically در Angular

گاهی اوقات نمی‌خواهیم از لینک‌های HTML استفاده کنیم و لازم است بعد از انجام یک عملیات کاربر را به صفحه دیگری هدایت کنیم.

برای مثال:

• بعد از ثبت فرم
• بعد از ورود کاربر
• پس از حذف اطلاعات
• بعد از ثبت موفق سفارش

در این شرایط از Router Service استفاده می‌کنیم.

استفاده از Router در Angular

ابتدا Router را Inject می‌کنیم.

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

export class RegisterComponent {

  router = inject(Router);

}

انتقال به یک مسیر ساده

goToProducts() {
  this.router.navigate(['/products']);
}

با اجرای این کد کاربر به صفحه محصولات منتقل می‌شود.

انتقال به مسیر همراه با پارامتر

goToDetails(productId: number) {
  this.router.navigate(['/products', productId]);
}

خروجی:

/products/5

هدایت کاربر بعد از ثبت فرم

یکی از رایج‌ترین کاربردهای Router.navigate در Angular هدایت کاربر پس از ثبت موفق اطلاعات است.

onSubmit() {

  if (this.registerForm.invalid) return;

  this.router.navigate(['/products']);

}

در این مثال، پس از ثبت فرم کاربر به صفحه محصولات منتقل می‌شود.

تفاوت routerLink و navigate()

هر دو برای مسیریابی استفاده می‌شوند اما کاربرد متفاوتی دارند.

تفاوت navigate و navigateByUrl

استفاده از navigate

this.router.navigate(['/products', 5]);

استفاده از navigateByUrl

this.router.navigateByUrl('/products/5');

تفاوت اصلی:

• navigate() آرایه دریافت می‌کند.
• navigateByUrl() یک URL کامل به‌صورت رشته دریافت می‌کند.

در بیشتر پروژه‌های Angular استفاده از navigate() رایج‌تر است.

مثال واقعی از Router Navigate در Angular

فرض کنید کاربر محصولی را حذف می‌کند و باید به صفحه لیست محصولات برگردد.

deleteProduct(id: number) {

  this.productsService.delete(id).subscribe(() => {
    this.router.navigate(['/products']);
  });

}

یا بعد از ثبت محصول جدید:

addProduct(product: Product) {

  this.productsService.add(product).subscribe((res) => {
    this.router.navigate(['/products', res.id]);
  });

}

در این حالت کاربر مستقیماً به صفحه جزئیات محصول جدید هدایت می‌شود.

نکات حرفه‌ای هنگام کار با Route Parameters

• قبل از استفاده از پارامترها مقدار null را بررسی کنید.
• در پروژه‌های بزرگ از Observable Pattern استفاده کنید.
• برای مدیریت Subscriptionها از AsyncPipe کمک بگیرید.
• برای محافظت از صفحات حساس از Route Guards استفاده کنید.
• از مسیرهای داینامیک برای صفحات جزئیات، پروفایل کاربران و سفارش‌ها استفاده کنید.

مزایای Route Parameters و Router Navigate

استفاده از Route Parameters و Router Navigate در Angular مزایای زیادی دارد:

• ساخت URLهای داینامیک
• مدیریت ساده ناوبری کاربران
• افزایش خوانایی کد
• سازگاری کامل با SPA
• تجربه کاربری بهتر
• پشتیبانی از معماری Reactive

جمع‌بندی

در این آموزش با Route Parameters و Router Navigate در Angular 17 آشنا شدیم. یاد گرفتیم چگونه مسیرهای داینامیک تعریف کنیم، پارامترهای URL را دریافت کنیم و کاربران را به‌صورت برنامه‌نویسی‌شده بین صفحات مختلف هدایت کنیم.

تسلط بر Route Parameters و Router Navigate یکی از مهارت‌های ضروری برای توسعه‌دهندگان Angular است و تقریباً در تمام پروژه‌های واقعی مورد استفاده قرار می‌گیرد.

دسترسی به ویدیوهای کامل دوره

برای مشاهده ویدیوهای کامل هر جلسه، دریافت تمرین‌ها، فایل‌ها و پشتیبانی، می‌توانید دوره کامل را تهیه کنید.