مقدمه
هنگامی که ما برنامه ها را می سازیم، ممکن است سناریوهایی وجود داشته باشد که بخواهیم برخی از آرگومان ها یا پارامترها را برای توصیف رفتار مسیر ارسال کنیم. در انگولار به آنها گفته می شود درخواست پارامترها و آنها اختیاری هستند. پارامترهای پرس و جو را نباید با پارامترهای معمولی اشتباه گرفت مسیر پارامترهایی که پارامترهای مورد نیاز هستند و فقط به یک مسیر محدود می شوند.
برای روشن شدن تفاوت بین پارامترهای مسیر و پارامترهای پرس و جو، تصور کنید که در حال ایجاد برنامه ای هستید که محصولات را ذخیره می کند. می توانید مسیری داشته باشید که هر محصول خاص را با استفاده از آن باز می کند شناسایی محصول. همچنین می توانید یک پارامتر پرس و جو را مشخص کنید: فقط خواندنی. چه زمانی فقط خواندنی تنظیم شده است درست است، واقعیکاربر فقط تا چه زمانی می تواند رکورد را مشاهده کند فقط خواندنی است نادرست، کاربر همچنین می تواند رکورد را ویرایش کند. بنابراین، با استفاده از تنها یک مسیر، هم موارد استفاده ویرایش و هم مرور قابل رسیدگی است. اینجا شناسایی محصول است پارامتر مسیر و در فقط خواندنی که اختیاری است درخواست پارامتر.
پیش نیازها
برای درک کامل این مقاله، دانش ساخت برنامه های کاربردی با استفاده از Angular مورد نیاز است. تجربه با Angular Router، RouterLink و ActivatedRoute نیز مفید خواهد بود.
ارسال پارامترهای درخواست با Router.navigate
اگر استفاده می کنید روتر.حرکت کنید برای پیمایش در مسیرها، استفاده کنید queryParams برای ارسال پارامترهای درخواست
در مثال بالا، اگر می‌خواهیم بازدیدکنندگان لیست محصولات مرتب‌شده بر اساس محبوبیت را ببینند، از کد زیر استفاده می‌کنیم:
navigateToProducts() { this.router.navigate(
[‘/products’], { queryParams: { order: ‘popular’ } } ); }
|
navigateToProducts() { این.روتر.حرکت کنید( [‘/products’]، { queryParams: { سفارش: ‘محبوب’ } } ); } |
با استفاده از این کد، URL به صورت زیر در می آید:
http://localhost:4200/products?order=popular
|
http://localhost:4200/products?order=popular |
با این حال، ممکن است سناریوهایی وجود داشته باشد که در آن باید چندین پارامتر را هنگام پیمایش پاس کنیم. به عنوان مثال، اگر بخواهیم محصولات را بر اساس محبوبیت و همچنین قیمت مرتب کنیم، می توانیم از کد زیر استفاده کنیم:
navigateToProducts() { this.router.navigate(
[‘/products’], { queryParams: { order: ‘popular’, price: ‘high-to-low’ } }); }
|
navigateToProducts() { این.روتر.حرکت کنید( [‘/products’]، { queryParams: { سفارش: ‘محبوب’، قیمت: “بالا به پایین” } } ); } |
این بار URL تبدیل خواهد شد:
http://localhost:4200/products?order=popular&price=high-to-low
|
http://localhost:4200/products?order=popular&price=high-to-low |
این نحوه تنظیم پارامترهای پرس و جو با استفاده از queryParams.
با استفاده از queryParamsHandling از از دست رفتن پارامترهای پرس و جو جلوگیری کنید
هنگام پیمایش بین مسیرها، پارامترها از بین می روند. فرض کنید ما استدلال می کنیم arg0 هنگامی که مسیریابی بعدی اتفاق می افتد، منتقل نمی شود. می توانیم با استفاده از پارامترها را ذخیره کنیم queryParamsHandling و یک مقدار را به صرفه جویی یا ادغام.
فرض کنید در مثال بالا می خواهیم بازدیدکنندگان را به آن هدایت کنیم مارک ها صفحه از تولید – محصول با پارامتر مسیر { سفارش: ‘محبوب’ }، ذخیره پارامترهای مسیر. برای این کار می توانیم استفاده کنیم queryParamsHandling و آن را تنظیم کنید صرفه جویی :
navigateToBrand() { this.router.navigate(
[‘/brand’], { queryParamsHandling: ‘preserve’ } ); }
|
navigateToBrand() { این.روتر.حرکت کنید( [‘/brand’]، { queryParamsHandling: “نگاه داشتن” } ); } |
با این کار URL به شکل زیر در می آید:
http://localhost:4200/users?brand=popular
|
http://localhost:4200/users?brand=popular |
سپس فرض کنید می خواهیم پارامتر query را برای مسیر قبلی ذخیره کنیم { سفارش: ‘محبوب’ } هنگام اضافه کردن پارامترهای جدید { قیمت: “بالا به پایین” }. می توانیم راه اندازی کنیم queryParamsHandling به ادغام:
navigateToBrand() { this.router.navigate(
[‘/brand’], { queryParams: { price: ‘high-to-low’ }, queryParamsHandling: ‘merge’ }); }
|
navigateToBrand() { این.روتر.حرکت کنید( [‘/brand’]، { queryParams: { قیمت: “بالا به پایین” }، queryParamsHandling: “ادغام” } ); } |
با کد بالا، URL تبدیل می شود:
http://localhost:4200/brand?order=popular&price=high-to-low
|
http://localhost:4200/brand?order=popular&price=high-to-low |
در اینجا ذخیره پارامترهای پرس و جو را با استفاده از آن به پایان می رسانیم queryParamsHandling برای ذخیره یا ادغام
ارسال پارامترهای درخواست با RouterLink
با توجه به اتصال قبلی ما اگر بخواهیم استفاده کنیم RouterLink دستورالعمل ناوبری، ما باید پارامترهای پرس و جو را با استفاده از queryParams مانند زیر:
توجه کنید که چگونه شی را به آن منتقل می کنیم queryParams با استفاده از اتصال یک طرفه ما همچنین می توانیم یک شیء کامل را به عنوان ارسال کنیم queryParams .
همچنین، اگر بخواهیم این پارامترهای پرس و جو را در مسیریابی بعدی به جلو ببریم، می توانیم استفاده کنیم queryParamsHandling گزینه. گزینه های احتمالی queryParamsHandling هستند ادغام و صرفه جویی:
|
[routerLink]=“[‘/products’]” [queryParams]=“{ filter: ‘new’, row: ‘popular’}” queryParamsHandling=“ادغام”>محصولات |
در اینجا، ما دیدیم که چگونه عبور کنیم queryParams و پردازش پارامتر با استفاده از queryParamsHandling که در RouterLink.
خواندن مقادیر پارامترهای پرس و جو
تا اینجا ما یاد گرفتیم که چگونه پارامترهای درخواست را به مسیر منتقل کنیم. این پارامترها اختیاری بودند و برای ارسال اطلاعات به صفحه فرود استفاده می شدند. ارسال پارامترها یک قسمت است، اما شما همچنین باید پارامترها را از URL بخوانید و از آنها استفاده کنید.
در Angular، پارامترهای درخواست مسیر را با استفاده از آن می خوانیم مسیر فعال شده کلاس را مسیر فعال شده دارای یک ویژگی قابل مشاهده به نام queryParams برای نشان دادن پارامترهای URL فعلی.
فرض کنید با URL زیر سر و کار داریم:
http://localhost:4200/products?order=popular
|
http://localhost:4200/products?order=popular |
برای دسترسی به پارامتر پرس و جو سفارش در کد از کد زیر استفاده می کنیم:
وارد کردن { ActivatedRoute } از ‘@angular/router’; وارد کردن ‘rxjs/add/operator/filter’; @Component({ … }) class export SampleComponent OnInit { order: string; سازنده (مسیر خصوصی: ActivatedRoute) {} ngOnInit() { this.route.queryParams .filter(params => params.order) .subscribe(params => {consol.log(params); // {order: “popular” } this.order = params.order; }); }}
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
وارد كردن { مسیر فعال شده } از جانب ‘@angular/router’; وارد كردن “rxjs/add/operator/filter”; @مولفه({ ... }) صادرات کلاس جزء نمونه ابزار OnInit { سفارش: یک رشته; سازنده(خصوصی مسیر: مسیر فعال شده) { } ngOnInit() { این.مسیر.queryParams .فیلتر(مولفه های => مولفه های.سفارش) .اشتراک در(مولفه های => { کنسول.دفتر خاطرات(مولفه های); // { سفارش: “محبوب” } این.سفارش = مولفه های.سفارش; }); } } |
در اینجا در کنسول مقدار آن را خواهیم دید سفارش مقدار پارامتر پرس و جو “محبوب“ چاپ شده. اگر چند پارامتر پرس و جو داشته باشیم، می توانیم استفاده کنیم queryParamMap خاصیتی که یک قابل مشاهده را برمی گرداند paramsMap هدف – شی.
اگر یک URL با پارامترهای پرس و جوی متعدد مانند:
http://localhost:4200/products?order=popular&price=high-to-low
|
http://localhost:4200/products?order=popular&price=high-to-low |
با استفاده از کد زیر می توانیم به این پارامترهای پرس و جو دسترسی پیدا کنیم:
this.route.queryParamMap .subscribe((params) => { this.queryObj = { …params.keys, …params }; } );
|
این.مسیر.queryParamMap .اشتراک در((مولفه های) => { این.queryObj = { ...مولفه های.کلیدها، ...مولفه های }; } ); |
استفاده كردن اپراتور توزیع شی در اینجا به نتیجه زیر می رسیم:
{ “0”: “order”، “1”: “filter”, “parameters”: { “order”: “popular”, “price”: “high to low” } }
|
{ “0”: “سفارش”، “1”: “فیلتر”، “مولفه های”: { “سفارش”: “محبوب”، “قیمت”: “بالا به پایین” } } |
در نهایت، باید بتوانید نحوه دسترسی به پارامترهای پرس و جو از مسیرهای دریافتی را بفهمید.
نتیجه
در این آموزش، تفاوت بین پارامترهای پرس و جو و پارامترهای مسیر را بررسی کردیم. ما همچنین نحوه عبور آرگومان ها را از طریق مسیرها به عنوان پارامترهای پرس و جو و همچنین بازیابی آنها به صفحه با استفاده از آن بررسی کردیم. queryParams و queryParamsHandling با روتر.حرکت کنید و RouterLink. ما همچنین یاد گرفتیم که چگونه رفتار کنیم queryParams و queryParamMap با مسیر فعال شده.
Angular در پایه خود به جاوا اسکریپت نیاز دارد. اگر می خواهید دانش جاوا اسکریپت خود را گسترش دهید، می توانید وبلاگ های زیر را بررسی کنید:
کار کامپیوتر مبارک!
درباره شریاس پاتیل
متخصص عمومی در علم داده