پارامترهای URL در انگولار — به زبان ساده

در این مقاله با روش بازیابی پارامترهای URL در انگولار و رشته کوئری آشنا خواهیم شد. غالباً دیده می‌شود که افراد در مورد مسیریابی در انگولار دچار سردرگمی می‌شوند. به طور خاص این سردرگمی در مورد بازیابی پارامترها از URL و رشته کوئری وجود دارد. این کار نسبتاً ساده‌ای است و با بررسی یک مثال به سادگی آموخته می‌شود. در این مقاله قصد داریم چنین کاری را انجام دهیم.

مسیرها

با توجه به مقاصد این راهنما روی پارامترهای مسیر متمرکز می‌شویم.

فیلم آموزش فریم ورک انگولار جی اس – ساخت اپلیکیشن با AngularJS در فرادرس

کلیک کنید

می‌خواهیم یک مسیر به صورت animals/:animal ایجاد کنیم. در این مسیر می‌توانیم به بخش‌های animals/dog یا animals/cat برویم تا به ترتیب یکی از موارد dog یا cat را از پارامتر ‎:animal بازیابی کنیم.

1{ path: "animals/:animal", component: AnimalsComponent }

علامت دونقطه موجب می‌شود که بخش دوم URL به یک پارامتر تبدیل شود.

دستیابی به URL

انگولار یک شیء ActivatedRoute در اختیار ما قرار می‌دهد. به این ترتیب می‌توانیم URL را از طریق این شیء مورد دستیابی قرار دهیم، اما ابتدا باید آن را در کامپوننت تزریق کنیم. این کار را مانند تزریق یک سرویس انجام می‌دهیم:

1import { ActivatedRoute } from "@angular/router";
2constructor(private route: ActivatedRoute) { }

دستیابی به پارامترهای URL

به طور کلی دو روش پذیرفته شده برای دستیابی به پارامترهای URL وجود دارد. یکی از طریق route.snapshot.paramMap و دیگری از طریق route.paramMap.subscribe است. تفاوت اصلی بین این دو روش آن است که اشتراک در زمانی که پارامتر برای یک مسیر خاص تغییر می‌یابد، همچنان به‌روزرسانی شود یا نه.

اسنپ‌شات

استفاده از اسنپ‌شات چنان که از نام آن مشخص است، رویدادی یک‌بارمصرف است. یک کاربرد معمول آن دریافت پارامتر در زمان بارگذاری کامپوننت است. در کد زیر زمانی که کامپوننت بارگذاری می‌شود، پارامتر URL را دریافت خواهیم کرد.

1ngOnInit() {
2  this.animal = this.route.snapshot.paramMap.get("animal")
3}

این راهبرد در صورتی که پارامتر درون آن کامپوننت تغییر یابد کار نخواهد کرد. به بیان صریح‌تر تغییر از animals/dog به animals/cat موجب تخریب و مقداردهی AnimalComponent نمی‌شود و از این رو متد ngOnInit برای بار دوم فراخوانی نمی‌شود.

اشتراک

استفاده از اشتراک (subscription)‌ در این راهبرد مانند هر اشتراک دیگر است. اگر تغییری در مقدار observable وجود داشته باشد، به تابع Callback ارسال می‌شود. این راهبرد در صورتی مفید است که پارامتر (های) URL درون مسیر جاری تغییر یابند:

1ngOnInit() {
2  this.route.paramMap.subscribe(params => {
3    this.animal = params.get("animal")
4  })
5}

این راهبرد ممکن است زیاده‌روی به نظر برسد، اما قطعاً یک راهبرد امن محسوب می‌شود. ضمناً دیگر نیازی به اشتراک در paramMap وجود ندارد. زمانی که کامپوننت مسیریابی‌شده از بین برود، نیز از بین می‌رود و از این رو اشتراک نیز نابود خواهد شد.

دستیابی به پارامترهای کوئری

دستیابی به پارامترهای رشته کوئری فرایندی مشابه پارامترهای URL دارد. صرفاً از مشخصه متفاوتی روی شیء ActivatedRoute به نام ActivatedRoute استفاده می‌شود. بنابراین همه آن اصول به صورت مشابه اعمال می‌شوند، اما باید مطمئن شوید که از مشخصه صحیحی استفاده می‌کنید.

1ngOnInit() {
2  this.name = this.route.snapshot.queryParamMap.get("paramName")
3  this.route.queryParamMap.subscribe(queryParams => {
4    this.name = queryParams.get("paramName")
5  })
6}

نکته پیشرفته: استفاده از switchMap

switchMap موجب لغو شدن یک درخواست در زمان وارد شدن درخواست جدید می‌شود. برای نمونه اگر در paramMap مشترک باشیم و تغییرهای مکرری در پارامترهای مسیر ایجاد کنیم، switchMap همه درخواست‌های معلق را لغو کرده و درخواست جدید را می‌گیرد. این حالت در اغلب موارد زیاده‌روی محسوب می‌شود، اما می‌تواند مفید باشد:

1import { switchMap } from "rxjs/operators" // RxJS v6
2ngOnInit() {
3  this.route.paramMap.pipe(
4    switchMap(params => {
5      this.animal = params.get("animal")
6    })
7  )
8}

در کد فوق به بررسی درخواست HTTP درون switchMap می‌پردازیم. در ادامه آن را کمی بیشتر بررسی می‌کنیم:

1import { switchMap } from "rxjs/operators" // RxJS v6
2ngOnInit() {
3  this.route.paramMap.pipe(
4    switchMap(params => {
5      this.animal = params.get("animal")
6    })
7  )
8}

در مثال فوق، یک درخواست HTTP درون اشتراک paramMap ارسال می‌کنیم. چنان که می‌دانیم درخواست‌های HTTP نسبتاً پرهزینه هستند. اگر این تغییرها به صورت مکرر رخ بدهند، باید درخواست‌های قبلی لغو شوند. در این حالت استفاده از switchMap این کار را انجام می‌دهد و از این رو یک بهبود عملکردی محسوب می‌شود.

سخن پایانی

دریافت پارامترها از URL در انگولار کار آسانی است. کافی است از اسنپ‌شات برای دریافت یک‌باره و یا از اشتراک برای دریافت متعدد پارامترهای متغیر درون یک کامپوننت یا مسیر استفاده کنیم. اگر یک درخواست HTTP درون اشتراک ارسال می‌شود، در این صورت باید از switchMap برای لغو همه درخواست‌های معلق غیر ضروری استفاده کنیم.

فیلم مجموعه آموزش جاوا اسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های جاوا اسکریپت
• مجموعه آموزش‌‌های برنامه‌‌نویسی
• آموزش مقدماتی AngularJS
• ساخت داشبورد سازمانی مقیاس پذیر با انگولار — بخش اول
• ایجاد آدرس کوتاه و منحصر به فرد برای هر مکان با AngularJS و PHP — راهنمای جامع

==