// Tutorial //

Cara Menggunakan Parameter Kueri di Angular

Published on December 15, 2020
Default avatar
By Alligator.io
Developer and author at DigitalOcean.
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.

If you’ve enjoyed this tutorial and our broader community, consider checking out our DigitalOcean products which can also help you achieve your development goals.

Learn more here


About the authors
Default avatar
Developer and author at DigitalOcean.

Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
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!