استفاده از پارامترهای Query با Angular Router • CloudSigma

تاریخ انتشار : یکشنبه 30 مرداد 1401

وبلاگ

استفاده از پارامترهای Query با Angular Router • CloudSigma

مقدمه

هنگامی که ما برنامه ها را می سازیم، ممکن است سناریوهایی وجود داشته باشد که بخواهیم برخی از آرگومان ها یا پارامترها را برای توصیف رفتار مسیر ارسال کنیم. در انگولار به آنها گفته می شود درخواست پارامترها و آنها اختیاری هستند. پارامترهای پرس و جو را نباید با پارامترهای معمولی اشتباه گرفت مسیر پارامترهایی که پارامترهای مورد نیاز هستند و فقط به یک مسیر محدود می شوند.

برای روشن شدن تفاوت بین پارامترهای مسیر و پارامترهای پرس و جو، تصور کنید که در حال ایجاد برنامه ای هستید که محصولات را ذخیره می کند. می توانید مسیری داشته باشید که هر محصول خاص را با استفاده از آن باز می کندشناسایی محصول. همچنین می توانید یک پارامتر پرس و جو را مشخص کنید:فقط خواندنی. چه زمانیفقط خواندنی تنظیم شده استدرست است، واقعیکاربر فقط تا چه زمانی می تواند رکورد را مشاهده کندفقط خواندنی استنادرست، کاربر همچنین می تواند رکورد را ویرایش کند. بنابراین، با استفاده از تنها یک مسیر، هم موارد استفاده ویرایش و هم مرور قابل رسیدگی است. اینجاشناسایی محصول است پارامتر مسیر و درفقط خواندنی که اختیاری است درخواست پارامتر.

پیش نیازها

برای درک کامل این مقاله، دانش ساخت برنامه های کاربردی با استفاده از 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 مانند زیر:

<a [routerLink]="['/products']" [queryParams]="{ order: 'popular' }"> محصولات </a>

[routerLink]=“[‘/products’]” [queryParams]=“{ order: ‘popular’ }”>

محصولات

توجه کنید که چگونه شی را به آن منتقل می کنیمqueryParams با استفاده از اتصال یک طرفه ما همچنین می توانیم یک شیء کامل را به عنوان ارسال کنیمqueryParams .

همچنین، اگر بخواهیم این پارامترهای پرس و جو را در مسیریابی بعدی به جلو ببریم، می توانیم استفاده کنیمqueryParamsHandling گزینه. گزینه های احتمالی queryParamsHandling هستندادغام وصرفه جویی:

<a [routerLink]="['/products']" [queryParams]="{ filter: 'new', order: 'popular' }" queryParamsHandling="merge">محصولات</a>

[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; }); }}

وارد كردن { مسیر فعال شده } از جانب ‘@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 در پایه خود به جاوا اسکریپت نیاز دارد. اگر می خواهید دانش جاوا اسکریپت خود را گسترش دهید، می توانید وبلاگ های زیر را بررسی کنید:

کار کامپیوتر مبارک!

درباره شریاس پاتیل

متخصص عمومی در علم داده