Góc 2 Định tuyến dựa trên tham số truy vấn

Question

Có thể trong Angular 2 để xác định định tuyến dựa trên tham số truy vấn không? Tôi muốn có hành vi sau:

Nếu người dùng nhập url http:<server-path>/search Tôi muốn chuyển đến thành phần StartPage.

Nếu người dùng nhập url http:<server-path>/search?query=sometext Tôi muốn định tuyến đến thành phần ResultList.

Tôi biết rằng có thể sử dụng các thông số đường dẫn để định tuyến nhưng đây không phải là những gì tôi muốn làm. Tôi muốn sử dụng thông số truy vấn nếu có thể. Tôi biết cách kích hoạt điều hướng theo góc với tham số truy vấn nhưng tôi không biết cách định cấu hình Tuyến đường.

Answer 1

Vì vậy, bạn không thể xác định path bằng chuỗi truy vấn trong đó nhưng bạn có thể sử dụng tuyến đường matcher thay vào đó và xác định thời điểm tuyến đường đến thành phần ResultList. Bạn xác định điều này ở trên định nghĩa tuyến đường mặc định cho search để nếu khớp không thành công, nó sẽ mặc định theo tuyến tìm kiếm không có chuỗi truy vấn.

{ 
    component: ResultListComponent, 
    matcher: (url: UrlSegment[]) => { 
     console.log(url); 
     return url.length === 1 && url[0].path.indexOf('search?query=') > -1 ? ({consumed: url}) : null; 
    } 
}, 
{ 
    path: 'search', 
    component: SearchComponent, 
} 

Demo

Answer 2

Bạn cũng có thể thiết lập một cái gì đó như thế này:

Tuyến đường:

{ path: 'server-path/:id', component: ResultListComponent }, 
{ path: 'server-path', component: serverPathComponent }, 

ResultListComponent

queryParam: string; 
    ngOnInit() {  
      this.route.params.forEach((params: Params) => { 
       this.queryParam = params['id']; 

      }); 
     } 

Bạn có thể gọi bất kỳ chức năng hoặc bất cứ điều gì mà bạn cần làm bằng cách sử dụng truy vấn đóParam.

Thông tin thêm về params truy vấn có thể được tìm thấy tại Routing & Navigation guide

Answer 3

Trong đoạn mã dưới đây tôi sẽ làm thế nào để vượt qua các thông số chuỗi truy vấn trên bất kỳ tuyến đường.

giả sử chúng ta muốn có url dưới đây:

http://localhost:4200/myUrl?QueryParamEx=2258 

Trong constructor của bạn tiêm phụ thuộc ROUTER

constructor(...private router: Router..){...} 

Chức năng điều hướng sẽ cho phép chúng tôi hướng đến url trước

goMyUrl() { 
    this.router.navigate(['/myUrl'], { queryParams: { QueryParamEx: '2258' } }); 
}