• فوتوشوب أون لاين مجانا – Photoshop Online Free
  • إيموجي – Émoji
مدونة عبقور
  • الرئيسية
  • أخبار
  • نصائح وحيل
  • هواتف
    • أندرويد
    • أيفون
  • برمجة
    • Angular
    • CSS
    • PHP
  • ويندوز
  • لينكس
    • أوبونتو
  • الماك
  • حماية
No Result
View All Result
  • الرئيسية
  • أخبار
  • نصائح وحيل
  • هواتف
    • أندرويد
    • أيفون
  • برمجة
    • Angular
    • CSS
    • PHP
  • ويندوز
  • لينكس
    • أوبونتو
  • الماك
  • حماية
No Result
View All Result
مدونة عبقور
No Result
View All Result

Angular – شرح إضافة Query Parameters إلى Router

زكرياء الزحتي من طرف زكرياء الزحتي
12 أبريل، 2020
in Angular, برمجة
Angular – شرح إضافة Query Parameters إلى Router
1
SHARES
شارك على فيسبوكشارك على تويترشارك على واتساب

Angular تسمح لك بإضافة معلمات اختيارية أو كما تسمى Query parameters عبر أي رابط Route, وهي التي تكون بعد علامة اﻹستفهام في الرابط, مثل: /product/:id.
اﻷن سنرى كيف نضيف هذه Query parameters و قرائتها وأيضا كيفية التعامل معها من خلال Component.

استعلامات عبر Router.navigate:

إذا كنت تنتقل عبر الروابط عن طريق الدالة Router.navigate, هنا نقوم بإضافة Query parameters بهذه الطريقة:

goProducts() {
    this.router.navigate(['/products'], {
      queryParams: {
        price: 'cheap'
      }
    });
  }

سينتج لنا رابط كهذا:

http://localhost:4200/products?price=cheap

أيضا يمكننا تمرير العديد من اﻹستعلامات Query parameters هكذا:

goProducts() {
    this.router.navigate(['/products'], {
      queryParams: {
        price: 'cheap',
        order: 'alphabetic'
      }
    });
  }

وستكون النتيجة هكذا:

http://localhost:4200/products?price=cheap&order=alphabetic

الخاصية queryParamsHandling:

في العادة عندما ننتقل إلى أي رابط أخر نفقد اﻹستعلامات التي لدينا في الصفحة الحالية, لكن ماذا لو كنا نريد اﻹنتقال إلى رابط أخر ومع اﻹستعلامات التي لدينا دون فقدانها أو ندمجها مع استعلامات جديدة؟
في هذه الحالة سنقوم باستعمال الخاصية : queryParamsHandling وتأخد قيمة نصية إما merge أو preserve.

merge : تعني دمج اﻹستعلامات الحالية مع استعلامات جديدة.
preserve : تعني اﻹحتفاظ باﻹستعلامات الحالية فقط.

goUsers() {
    this.router.navigate(['/users'], {
      queryParamsHandling: 'preserve'
    });
  }

يمكننا استعمال merge بدلا من preserve إذا أردنا دمج اﻹستعلامات الحالية مع استعلامات جديدة على الرابط users:

goUsers() {
    this.router.navigate(['/users'], {
      queryParamsHandling: 'merge',
      queryParams: {
        name: 'ab9or',
      }
    });
  }

ستكون النتيجة هي:

http://localhost:4200/users?price=cheap&order=alphabetic&name=ab9or

في الماضي كنا نحتفظ باﻹستعلامات عن طريق الخاصية preserveQueryParams نعطيها القيمة true, لكن ابتدائا من نسخة Angular 4 وما فوق تم إهمال هذه الخاصية وتم استبدالها بالخاصية queryParamsHandling.

Angular

استعلامات عبر RouterLink:

إذا كنت تستخدم الميزة RouterLink في التنقل بين الروابط, هنا نقوم بإضافة Query parameters بهذه الطريقة:

<a [routerLink]="['/products']" [queryParams]="{price: 'cheap'}">
  Products
</a>

وإذا كنت تريد اﻹحتفاظ باﻹستعلامات أو دمجها مع استعلامات الحالية, نضيف الخاصية queryParamsHandling بهذه الطريقة:

<a [routerLink]="['/users']" [queryParams]="{ name: 'ab9or' }" queryParamsHandling="merge">
  Users
</a>

قراءة اﻹستعلامات Query parameters:

اﻷن تعلمنا كيف نقوم بإضافة استعلامات على الرابط, اﻷن سنرى كيف نقرأ قيم تلك اﻹستعلامات.
في هذا الجزء سنستعمل الكلاس ActivatedRoute, هذا الكلاس لديه دالة اسمها queryParams, هذه الدالة هي المسؤلة عن قرائة اﻹستعلامات الرابط الحالي, وهي من نوع Observable يعني سنضيف لها الدالة subscribe.

على سبيل المثال سنحاول قراءة جميع استعلامات هذا الرابط:

http://localhost:4200/products?price=cheap&order=alphabetic

اﻷن سنقرأ قيمة اﻹستعلام price و order:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.scss']
})
export class ProductsComponent implements OnInit {

  priceQuery: string;
  orderQuery: string;

  constructor(private activatedRoute: ActivatedRoute) { }

  ngOnInit(): void {
    this.activatedRoute.queryParams.subscribe(params => {
      this.priceQuery = params.price; // لﻹستعلام price=cheap
      this.orderQuery = params.order; // order=alphabetic لﻹستعلام

      console.log(this.priceQuery); // للطباعة قيمة ﻹستعلام price في كونسول المتصفح
      console.log(this.orderQuery); // للطباعة قيمة ﻹستعلام order في كونسول المتصفح
    });
  }

}
Tags: AngularQuery parametersRouteRouterاﻷنجولار
Share1TweetSend
Previous Post

تم اختراق المئات من حسابات Zoom ونشرها في الويب المظلم

Next Post

لينكس – شرح اﻷمر zcat

زكرياء الزحتي

زكرياء الزحتي

اللهم علمنا ما ينفعنا وانفعنا بما علمتنا انك انت العليم الحكيم .. اكتب بما فيه فائدة للآخرين هنا .. سواءاً عن التقنية أو التجارب الشخصية أو مواضيع متنوعة .. اكتب وأدون تجاربي واشارككم بعض اللحظات والمواضيع المفيدة ..

Related Posts

reCaptcha مع php باستعمال curl فقط
PHP

إضافة reCaptcha لأي موقع بلغة PHP

1 ديسمبر، 2021
ما هي Flutter ؟
Flutter

ما هي Flutter ؟

28 نوفمبر، 2021
php – شرح الدالة array_push
PHP

php – شرح الدالة array_push

30 أغسطس، 2020
CSS – شرح الخاصية position وقيمها
CSS

CSS – شرح الخاصية position وقيمها

1 يوليو، 2020
أوبونتو - تثبيت أداة Compass للترجمة ملفات SCSS/SASS إلى CSS
CSS

أوبونتو – تثبيت أداة Compass للترجمة ملفات SCSS/SASS إلى CSS

22 يونيو، 2020
أوبونتو – شرح تثبيت composer ومستلزماته
PHP

أوبونتو – شرح تثبيت composer ومستلزماته

18 يونيو، 2020
PHP - Laravel - شرح الدالة __invoke() وكيفية استدعائها
PHP

PHP – Laravel – شرح الدالة __invoke() وكيفية استدعائها

30 أغسطس، 2020
PHP - الاستثناءات و معالجة اﻷخطاء (Exceptions && Error Handling)
PHP

PHP – الاستثناءات و معالجة اﻷخطاء (Exceptions && Error Handling)

27 أبريل، 2020

[vc_row][vc_column][vc_row_inner][vc_column_inner][vc_wp_tagcloud title="" taxonomy="post_tag"][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row full_width="stretch_row_content_no_spaces" rtl_reverse="yes" vc_row_background=""][vc_column][vc_raw_html]JTNDZGl2JTIwc3R5bGUlM0QlMjJtYXJnaW4tdG9wJTNBMjBweCUyMiUyMGNsYXNzJTNEJTIyZm9vdGVyLWhvbGRlciUyMiUyMGlkJTNEJTIyZm9vdGVyJTIyJTIwZGF0YS1pZCUzRCUyMmZvb3RlciUyMiUzRSUwQSUzQ2RpdiUyMGNsYXNzJTNEJTIyamVnX2Zvb3RlciUyMGplZ19mb290ZXJfNiUyMGRhcmslMjIlM0UlMEElM0NkaXYlMjBjbGFzcyUzRCUyMmplZ19mb290ZXJfY29udGFpbmVyJTIwamVnX2NvbnRhaW5lciUyMiUzRSUwQSUzQ2RpdiUyMGNsYXNzJTNEJTIyamVnX2Zvb3Rlcl9jb250ZW50JTIyJTNFJTBBJTNDZGl2JTIwY2xhc3MlM0QlMjJjb250YWluZXIlMjIlM0UlMEElM0NkaXYlMjBjbGFzcyUzRCUyMmplZ19mb290ZXJfcHJpbWFyeSUyMGNsZWFyZml4JTIyJTNFJTBBJTNDZGl2JTIwY2xhc3MlM0QlMjJmb290ZXJfd2lkZ2V0JTIwd2lkZ2V0X2puZXdzX2Fib3V0JTIyJTIwaWQlM0QlMjJqbmV3c19hYm91dC0xJTIyJTNFJTIwJTNDZGl2JTIwY2xhc3MlM0QlMjJqZWdfYWJvdXQlMjIlM0UlMEElM0NhJTIwY2xhc3MlM0QlMjJmb290ZXJfbG9nbyUyMiUyMGhyZWYlM0QlMjJodHRwcyUzQSUyRiUyRnd3dy5hYjlvci5jb20lMkYlMjIlM0UlMEElM0NpbWclMjBjbGFzcyUzRCUyMmxhenlsb2FkZWQlMjIlMjBzdHlsZSUzRCUyMmhlaWdodCUzQTIwMHB4JTIyJTIwc3JjJTNEJTIyaHR0cHMlM0ElMkYlMkZ3d3cuYWI5b3IuY29tJTJGd3AtY29udGVudCUyRnVwbG9hZHMlMkYyMDIxJTJGMDMlMkZwbmdlZ2cucG5nJTIyJTNFJTBBJTNDJTJGYSUzRSUwQSUzQ3AlM0UlRDklODUlRDglQUYlRDklODglRDklODYlRDglQTklMjAlRDglQjklRDglQTglRDklODIlRDklODglRDglQjElMjAlRDglQUElRDglQUElRDklODglRDklODElRDglQjElMjAlRDglQjklRDklODQlRDklODklMjAlRDklODUlRDklODIlRDglQTclRDklODQlRDglQTclRDglQUElMjAlRDklODElRDklOEElMjAlRDklODUlRDglQUUlRDglQUElRDklODQlRDklODElMjAlRDglQTclRDklODQlRDklODUlRDglQUMlRDglQTclRDklODQlRDglQTclRDglQUElMjAlRDglQTclRDklODQlRDglQUElRDklOEElMjAlRDglQUElRDglQUElRDglQjklRDklODQlRDklODIlMjAlRDglQTglRDglQTclRDklODQlRDglQUElRDklODMlRDklODYlRDklODglRDklODQlRDklODglRDglQUMlRDklOEElRDglQTclMjAlRDglQTclRDklODQlRDglQUQlRDglQUYlRDklOEElRDglQUIlRDglQTklMkMlMjAlRDklODglRDglQTMlRDklOEElRDglQjYlRDglQTclMjAlRDglQUElRDglQUElRDklODYlRDglQTclRDglQjMlRDglQTglMjAlRDklODUlRDglQjklMjAlRDglQUMlRDklODUlRDklOEElRDglQjklMjAlRDglQTclRUYlQkIlQjclRDglQUMlRDklODclRDglQjIlRDglQTkuJTNDJTJGcCUzRSUwQSUzQyUyRmRpdiUzRSUwQSUzQyUyRmRpdiUzRSUyMCUzQyUyRmRpdiUzRSUwQSUzQyUyRmRpdiUzRSUwQSUzQyUyRmRpdiUzRSUwQSUzQ2RpdiUyMGNsYXNzJTNEJTIyamVnX2Zvb3Rlcl9pbnN0YWdyYW1fd3JhcHBlciUyMGplZ19jb250YWluZXIlMjIlM0UlMEElM0MlMkZkaXYlM0UlMEElM0NkaXYlMjBjbGFzcyUzRCUyMmplZ19mb290ZXJfdGlrdG9rX3dyYXBwZXIlMjBqZWdfY29udGFpbmVyJTIyJTNFJTBBJTIwJTNDJTJGZGl2JTNFJTBBJTNDZGl2JTIwY2xhc3MlM0QlMjJqZWdfZm9vdGVyX2JvdHRvbSUyMiUzRSUwQSUzQ2RpdiUyMGNsYXNzJTNEJTIyY29udGFpbmVyJTIyJTNFJTBBJTBBJTNDZGl2JTIwY2xhc3MlM0QlMjJmb290ZXJfcmlnaHQlMjIlM0UlMEElM0N1bCUyMGNsYXNzJTNEJTIyamVnX21lbnVfZm9vdGVyJTIyJTNFJTNDbGklMjBpZCUzRCUyMm1lbnUtaXRlbS0xMDE0JTIyJTIwY2xhc3MlM0QlMjJtZW51LWl0ZW0lMjBtZW51LWl0ZW0tdHlwZS1jdXN0b20lMjBtZW51LWl0ZW0tb2JqZWN0LWN1c3RvbSUyMGN1cnJlbnQtbWVudS1pdGVtJTIwY3VycmVudF9wYWdlX2l0ZW0lMjBtZW51LWl0ZW0taG9tZSUyMG1lbnUtaXRlbS0xMDE0JTIyJTNFJTNDYSUyMGhyZWYlM0QlMjJodHRwcyUzQSUyRiUyRnd3dy5hYjlvci5jb20lMkYlMjIlMjBhcmlhLWN1cnJlbnQlM0QlMjJwYWdlJTIyJTNFJUQ4JUE3JUQ5JTg0JUQ4JUIxJUQ4JUE2JUQ5JThBJUQ4JUIzJUQ5JThBJUQ4JUE5JTNDJTJGYSUzRSUzQyUyRmxpJTNFJTBBJTNDbGklMjBpZCUzRCUyMm1lbnUtaXRlbS0xMjY1JTIyJTIwY2xhc3MlM0QlMjJtZW51LWl0ZW0lMjBtZW51LWl0ZW0tdHlwZS1wb3N0X3R5cGUlMjBtZW51LWl0ZW0tb2JqZWN0LXBhZ2UlMjBtZW51LWl0ZW0tcHJpdmFjeS1wb2xpY3klMjBtZW51LWl0ZW0tMTI2NSUyMiUzRSUzQ2ElMjBocmVmJTNEJTIyaHR0cHMlM0ElMkYlMkZ3d3cuYWI5b3IuY29tJTJGcHJpdmFjeS1wb2xpY3klMkYlMjIlM0UlRDglQjMlRDklOEElRDglQTclRDglQjMlRDglQTklMjAlRDglQTclRDklODQlRDglQUUlRDglQjUlRDklODglRDglQjUlRDklOEElRDglQTklMjAlRTIlODAlOTMlMjBQcml2YWN5JTIwUG9saWN5JTNDJTJGYSUzRSUzQyUyRmxpJTNFJTBBJTNDbGklMjBpZCUzRCUyMm1lbnUtaXRlbS0xMzU5JTIyJTIwY2xhc3MlM0QlMjJtZW51LWl0ZW0lMjBtZW51LWl0ZW0tdHlwZS1wb3N0X3R5cGUlMjBtZW51LWl0ZW0tb2JqZWN0LXBhZ2UlMjBtZW51LWl0ZW0tMTM1OSUyMiUzRSUzQ2ElMjBocmVmJTNEJTIyaHR0cHMlM0ElMkYlMkZ3d3cuYWI5b3IuY29tJTJGY29udGFjdC11cyUyRiUyMiUzRSVEOCVBNyVEOCVBQSVEOCVCNSVEOSU4NCUyMCVEOCVBOCVEOSU4NiVEOCVBNyUyMCVFMiU4MCU5MyUyMENvbnRhY3QlMjBVUyUzQyUyRmElM0UlM0MlMkZsaSUzRSUwQSUzQyUyRnVsJTNFJTBBJTNDJTJGZGl2JTNFJTBBJTBBJTNDcCUyMGNsYXNzJTNEJTIyY29weXJpZ2h0JTIyJTNFJTIwJTNDYSUyMGhyZWYlM0QlMjJodHRwcyUzQSUyRiUyRnd3dy5hYjlvci5jb20lMjIlMjB0aXRsZSUzRCUyMiVEOSU4NSVEOCVBRiVEOSU4OCVEOSU4NiVEOCVBOSUyMCVEOCVCOSVEOCVBOCVEOSU4MiVEOSU4OCVEOCVCMSUyMiUzRSVEOSU4NSVEOCVBRiVEOSU4OCVEOSU4NiVEOCVBOSUyMCVEOCVCOSVEOCVBOCVEOSU4MiVEOSU4OCVEOCVCMSUzQyUyRmElM0UlMjAlQzIlQTklMjAyMDIxJTIwJTNDJTJGcCUzRSUwQSUzQyUyRmRpdiUzRSUwQSUzQyUyRmRpdiUzRSUwQSUzQyUyRmRpdiUzRSUwQSUzQyUyRmRpdiUzRSUyMCUzQyUyRmRpdiUzRQ==[/vc_raw_html][/vc_column][/vc_row]

No Result
View All Result
  • الرئيسية
  • أخبار
  • نصائح وحيل
  • هواتف
    • أندرويد
    • أيفون
  • برمجة
    • Angular
    • CSS
    • PHP
  • ويندوز
  • لينكس
    • أوبونتو
  • الماك
  • حماية

مدونة عبقور © 2021

This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.

  • الرئيسية
  • سياسة الخصوصية – Privacy Policy
  • اتصل بنا – Contact US

مدونة عبقور © 2021