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

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

Menggunakan Parameter Kueri bersama RouterLink

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.