Làm cách nào để chuyển tham số giữa các trạng thái không có trong url?

Question

Tôi tự hỏi làm thế nào tôi có thể vượt qua các tham số, mà sẽ không được hiển thị trong URL?

Tính đến bây giờ tôi có:

{path: '/editUser/:userId', name: 'Edit User', component: UserEditComponent} 

Và khi tôi hướng đến quan điểm này như thế:

<a href="#" [routerLink]="['Edit User',{userId: id}]" 

Các userId sẽ hiển thị trong URL.

Tôi làm cách nào để đặt nó để URL không hiển thị trong URL?

Cảm ơn

Answer 1

Câu hỏi hay!

Tôi không biết chính xác làm thế nào để làm điều đó nhưng có tôi biết thay thế giống nhau để đăng bài là câu trả lời có thể giúp đỡ ai đó.

Về cơ bản có hai lựa chọn (lên đến kiến ​​thức của tôi) để gửi dữ liệu thông qua định tuyến

• RouteParams (như được sử dụng trong câu hỏi)
• dữ liệu (tài sản tại thời điểm định tuyến)

RouteParams

Bây giờ khi chúng tôi gửi dữ liệu bằng cách sử dụng RouteParams, chúng tôi phải xác định theo cách tương tự như sau:

{path: '/editUser/:userId', name: 'Edit User', component: UserEditComponent} 

<a href="#" [routerLink]="['Edit User',{userId: id}]" 

Bằng cách sử dụng phương pháp này, chúng tôi gửi dữ liệu normaly nhưng tất cả dữ liệu được hiển thị trong URL

liệu

khi chúng ta không muốn hiển thị dữ liệu trong đường dẫn URL hơn chúng ta phải gửi dữ liệu thông qua định tuyến sử dụng thuộc tính data của @RouteConfig annotation do angualr2 cung cấp. bằng cách sử dụng thuộc tính này, chúng tôi có thể gửi dữ liệu bổ sung cho các thành phần tại thời điểm cấu hình tuyến đường mà không hiển thị nó trong URL. đây là ví dụ về tài sản này.

@RouteConfig([ 
    {path: '/product/:id', component: ProductDetailComponentParam, 
    as: 'ProductDetail', data: {isProd: true}}]) 

export class ProductDetailComponentParam { 
    productID: string; 
    constructor(params: RouteParams, data: RouteData) { 
     this.productID = params.get('id'); 

     console.log('Is this prod environment', data.get('isProd')); 
    } 
} 

bằng cách sử dụng điều này chúng tôi có thể gửi dữ liệu qua định tuyến mà không hiển thị trong URL. dụ làm việc của cùng: http://plnkr.co/edit/N5IzUH0pc3nN1O7iQZkD?p=preview]

để biết thêm đọc này awesome article