// Tutorial //

Cara Menggunakan Parameter Kueri di Angular

Published on December 15, 2020
Default avatar

By Alligator.io

Bahasa Indonesia
Cara Menggunakan Parameter Kueri di Angular

Pengantar

Parameter kueri di Angular memungkinkan penyaluran parameter opsional di setiap rute dalam aplikasi. Parameter kueri berbeda dengan parameter rute biasa, yang hanya tersedia di satu rute dan tidak opsional (mis., /product/:id).

Dalam artikel ini, kita akan merujuk contoh aplikasi yang menampilkan daftar produk. Kita akan menyediakan nilai-nilai opsional order dan price-range yang dapat dibaca dan dipatuhi komponen penerima. Nilai-nilai yang disediakan akan memengaruhi pengurutan dan penyaringan daftar produk.

Menggunakan Parameter Kueri bersama Router.navigate

Jika Anda mengarahkan ke rute secara imperatif menggunakan Router.navigate, Anda akan menyalurkan parameter kueri dengan queryParams.

Dalam contoh, jika kita ingin mengarahkan pengunjung ke produk dengan daftar yang diurutkan berdasarkan popularitas, maka kodenya terlihat seperti ini:

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

Ini akan menghasilkan URL yang terlihat seperti ini:

http://localhost:4200/products?order=popular

Anda juga dapat menyediakan beberapa parameter kueri. Dalam contoh, jika kita ingin mengarahkan pengunjung ke produk dengan daftar yang diurutkan berdasarkan popularitas dan disaring dengan kisaran harga yang mahal, maka kodenya terlihat seperti ini:

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

Ini akan menghasilkan URL yang terlihat seperti ini:

http://localhost:4200/products?order=popular&price-range=not-cheap

Sekarang, Anda telah memahami cara menggunakan queryParams untuk mengatur parameter kueri.

Mempertahankan atau Menggabungkan Parameter Kueri dengan queryParamsHandling

Secara asali, parameter kueri hilang dalam tindakan navigasi selanjutnya. Untuk mencegah hal itu, Anda dapat mengatur queryParamsHandling ke 'preserve' atau 'merge'.

Dalam contoh, jika kita ingin mengarahkan pengunjung dari halaman dengan parameter kueri { order: 'popular' }, ke halaman /users sekaligus mempertahankan parameter kueri, kita perlu menggunakan 'preserve':

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

Ini akan menghasilkan URL yang terlihat seperti ini:

http://localhost:4200/users?order=popular

Dalam contoh, jika kita ingin mengarahkan pengunjung dari halaman dengan parameter kueri { order: 'popular' }, ke halaman /users sekaligus menyalurkan parameter kueri { filter: 'new' }, kita perlu menggunakan 'merge':

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

Ini akan menghasilkan URL yang terlihat seperti ini:

http://localhost:4200/users?order=popular&filter=new

Catatan: Mempertahankan parameter kueri yang digunakan harus dilakukan dengan preserveQueryParams diatur ke true, tetapi sekarang tidak lagi digunakan dalam Angular 4+, yang diganti dengan queryParamsHandling.

Sekarang, Anda telah memahami cara menggunakan queryParamsHandling untuk mempertahankan dan menggabungkan parameter kueri.

Dalam contoh, alih-alih menggunakan arahan RouterLink untuk menavigasi ke rute, Anda akan menggunakan queryParams seperti ini:

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

Dalam contoh, jika Anda ingin menggunakan parameter kueri 'preserve' atau 'merge' di navigasi selanjutnya, Anda akan menggunakan queryParamsHandling seperti ini:

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

Sekarang Anda memahami cara menggunakan queryParams dan queryParamsHandling bersama RouterLink.

Mengakses Nilai-nilai Parameter Kueri

Karena kita telah mengetahui cara menggunakan parameter kueri opsional ke suatu rute, mari kita lihat cara mengakses nilai-nilai ini pada rute yang dihasilkan. Kelas ActivatedRoute memiliki properti queryParams yang menghasilkan parameter kueri yang dapat dilihat dan tersedia dalam URL saat ini.

Dengan URL rute berikut:

http://localhost:4200/products?order=popular

Kita dapat mengakses parameter kueri order seperti ini:

// ...
import { ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/filter';

@Component({ ... })
export class ProductComponent implements OnInit {
  order: string;
  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.queryParams
      .filter(params => params.order)
      .subscribe(params => {
        console.log(params); // { order: "popular" }

        this.order = params.order;
        console.log(this.order); // popular
      }
    );
  }
}

Dalam log konsol, kita akan melihat objek params:

Output
{ order: "popular" }

Dan nilai params.order:

Output
popular

Ada juga queryParamMap, yang menghasilkan sesuatu yang terlihat bersama objek paramMap.

Dengan URL rute berikut:

http://localhost:4200/products?order=popular&filter=new

Kita dapat mengakses parameter kueri seperti ini:

this.route.queryParamMap
  .subscribe((params) => {
    this.orderObj = { ...params.keys, ...params };
  }
);

Kita menggunakan operator sebaran objek di sini, dan ini adalah bentuk yang dihasilkan dari data dalam orderObj:

{
  "0": "order",
  "1": "filter",
  "params": {
    "order": "popular",
    "filter": "new"
  }
}

Sekarang, Anda telah memahami cara menggunakan queryParams dan queryParamMap untuk mengakses nilai-nilai pada rute yang dihasilkan.

Kesimpulan

Dalam artikel ini, Anda telah menggunakan beragam contoh untuk mengatur dan mengambil parameter kueri di Angular. Anda telah diperkenalkan pada queryParams dan queryParamsHandling bersama Router.navigate dan RouterLink. Anda juga telah diperkenalkan pada queryParams dan queryParamMap dengan ActivatedRoute.

Jika Anda ingin mempelajari lebih lanjut tentang Angular, lihat laman topik Angular kami untuk proyek latihan dan pemrograman.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up now
About the authors
Default avatar
Alligator.io

author



Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment
Leave a comment...

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!