Hướng dẫn sử dụng Query Parameters trong Angular Router

Giới thiệu về Query Parameters trong Angular

Query parameters (tham số truy vấn) là một phần quan trọng trong phát triển ứng dụng web, cho phép bạn lưu trữ các trạng thái như bộ lọc, từ khóa tìm kiếm, phân trang hoặc sắp xếp trực tiếp trên đường dẫn URL. Trong Angular, bạn có thể dễ dàng quản lý các tham số này thông qua Angular Router và service ActivatedRoute.

Bài viết này sẽ hướng dẫn bạn các kỹ thuật cơ bản để làm việc với Query Parameters trong ứng dụng Angular.

1. Truyền Query Parameters khi chuyển hướng

Sử dụng directive routerLink trong Template

Nếu bạn điều hướng từ file HTML, hãy sử dụng thuộc tính queryParams gắn kèm với routerLink:

<a [routerLink]="['/products']" [queryParams]="{ page: 1, sort: 'asc' }">
  Xem danh sách sản phẩm
</a>

Sử dụng Router Service trong TypeScript

Trường hợp cần chuyển hướng bằng code TypeScript, bạn truyền đối tượng queryParams vào phương thức navigate của Router:

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html'
})
export class ProductListComponent {
  constructor(private router: Router) {}

  goToProducts() {
    this.router.navigate(['/products'], {
      queryParams: { page: 1, filter: 'tech' }
    });
  }
}

2. Đọc Query Parameters bằng ActivatedRoute

Để truy cập các tham số truy vấn từ URL, bạn cần inject service ActivatedRoute vào component.

Đọc giá trị tĩnh qua Snapshot

Cách này phù hợp nếu bạn chỉ muốn lấy giá trị một lần khi component được khởi tạo và tham số trên URL không bị thay đổi liên tục trên cùng một trang:

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

@Component({ ... })
export class ProductsComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    const page = this.route.snapshot.queryParams['page'];
    const filter = this.route.snapshot.queryParams['filter'];
    console.log(`Page: ${page}, Filter: ${filter}`);
  }
}

Theo dõi thay đổi liên tục bằng Observable

Khi người dùng thay đổi tham số URL mà không chuyển sang trang khác, bạn nên subscribe vào Observable queryParams để cập nhật giao diện kịp thời:

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    const page = params['page'] || 1;
    const filter = params['filter'] || '';
    // Gọi API hoặc xử lý lại dữ liệu dựa trên params mới
  });
}

3. Quản lý trạng thái URL với queryParamsHandling

Mặc định, khi chuyển hướng đến một route mới, các query parameters hiện tại sẽ bị xóa bỏ. Angular cung cấp tùy chọn queryParamsHandling để thay đổi hành vi này:

• preserve: Giữ nguyên toàn bộ các query parameters hiện tại khi chuyển sang route mới.
• merge: Kết hợp các query parameters hiện tại với các tham số mới truyền vào.

Ví dụ về tính năng merge:

this.router.navigate(['/products'], {
  queryParams: { sort: 'desc' },
  queryParamsHandling: 'merge'
});

Lệnh trên sẽ giữ lại các tham số cũ như page hoặc filter, đồng thời thêm hoặc cập nhật tham số sort thành desc.

Tổng kết

Việc làm chủ ActivatedRoute, queryParams và queryParamsHandling giúp ứng dụng Angular của bạn duy trì trạng thái dữ liệu mượt mà trên URL, nâng cao trải nghiệm người dùng và tối ưu hóa khả năng chia sẻ liên kết.

Ngày phát hành: 10/06/2026
Nguồn: www.digitalocean.com