Cách truyền tham số truy vấn bằng bộ định tuyếnLink


161

Tôi muốn vượt qua một tham số truy vấn prop=xxx.

Điều này đã không làm việc

<a [routerLink]="['/somepath', {queryParams: {prop: 'xxx'}}]>Somewhere</a>

Cú pháp mà bạn muốn sử dụng là cho các tham số ma trận và đây là biểu mẫu <a [routerLink]="['/somepath', { foo: 'foo' }]">Somewhere</a>, nó cung cấp cho bạn một tham số url ma trận (dấu chấm phẩy; thay vì? Và & separators) và bạn có thể truy cập nó bằng ActivatedRoute.params thay vì activRoute.queryParams stackoverflow.com/questions353688084/ ở đây stackoverflow.com/questions/2048121/ khăn
William Ardila

1
Các tham số truy vấn và tham số ma trận là như nhau. Sự khác biệt duy nhất là khi chúng được thêm vào phân đoạn gốc, chúng được tuần tự hóa dưới dạng tham số truy vấn, khi chúng được thêm vào phân đoạn con, chúng được tuần tự hóa dưới dạng tham số ma trận.
Günter Zöchbauer

Có một số khác biệt hơn kiểm tra này web.archive.org/web/20130126100355/http://brettdargan.com/blog/... Ngoài ra bạn có thể kiểm tra cú pháp tham số liên kết trong doc góc đây angular.io/docs/ts/latest/ hướng dẫn / đào
William Ardila

Câu trả lời:


325

queryParams

queryParamslà một đầu vào khác của routerLinknơi chúng có thể được thông qua như

<a [routerLink]="['../']" [queryParams]="{prop: 'xxx'}">Somewhere</a>

fragment

<a [routerLink]="['../']" [queryParams]="{prop: 'xxx'}" [fragment]="yyy">Somewhere</a>

routerLinkActiveOptions

Để nhận các tuyến hoạt động, lớp được đặt trên các tuyến mẹ:

[routerLinkActiveOptions]="{ exact: false }"

Để truyền tham số truy vấn để this.router.navigate(...)sử dụng

let navigationExtras: NavigationExtras = {
  queryParams: { 'session_id': sessionId },
  fragment: 'anchor'
};

// Navigate to the login page with extras
this.router.navigate(['/login'], navigationExtras);

Xem thêm https://angular.io/guide/router#query-parameter-and-fragments


Làm thế nào điều này sẽ làm việc lập trình? Tôi đã thử với this.router.navigate (['/ resetPassword', {queryParams: {username: loginName}}]); Nhưng kết quả là: localhost: 8100 / resetPassword; queryParams =% 5Bobject% 20Object% 5D
rickul

2
Tôi cập nhật câu trả lời của tôi. Xem thêm liên kết tôi đã thêm. Nó cho thấy một ví dụ đầy đủ.
Günter Zöchbauer

Cặp đôi lưu ý: mã của rickul phải là [ '/resetPassword' ], { queryParams: { username: loginName }})nơi ]xuất hiện trước các tính năng bổ sung. Cũng đừng quên rằng các thông số truy vấn có phân biệt chữ hoa chữ thường.
Simon_Weaver

2
Đừng quên đăng ký truy vấnParams trên mục tiêu: stackoverflow.com/a/39146394/2726844
Vince I

1
Hoặc nếu bạn đang sử dụng các tuyến đường, runGuardsAndResolvers: 'always'sẽ tải lại tuyến đường trung bình.com / engering
Adam
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.