Bộ định tuyến góc 2.navigate

Question

Tôi đang cố điều hướng đến tuyến đường trong Góc 2 với kết hợp các thông số tuyến đường và truy vấn.

Dưới đây là một lộ trình ví dụ trong đó các tuyến đường là phần cuối cùng của con đường:

{ path: ':foo/:bar/:baz/page', component: AComponent } 

Cố gắng liên kết sử dụng các mảng như vậy:

this.router.navigate(['foo-content', 'bar-contents', 'baz-content', 'page'], this.params.queryParams) 

tôi không nhận được bất kỳ lỗi nào và từ những gì tôi có thể hiểu điều này sẽ hiệu quả.

Các kiễu góc 2 tài liệu (tại thời điểm này) có sau đây là một ví dụ:

{ path: 'hero/:id', component: HeroDetailComponent } 

['/hero', hero.id] // { 15 } 

bất cứ ai có thể nhìn thấy nơi tôi sẽ sai? Tôi đang ở trên bộ định tuyến 3.

Answer 1

Nếu đoạn đầu tiên không bắt đầu bằng / thì đó là tuyến đường tương đối. router.navigate cần một tham số relativeTo để điều hướng tương đối

Hoặc bạn thực hiện các tuyến đường tuyệt đối:

this.router.navigate(['/foo-content', 'bar-contents', 'baz-content', 'page'], this.params.queryParams) 

hoặc bạn vượt qua relativeTo

this.router.navigate(['../foo-content', 'bar-contents', 'baz-content', 'page'], {queryParams: this.params.queryParams, relativeTo: this.currentActivatedRoute}) 

cũng Xem

• https://github.com/angular/angular.io/blob/c61d8195f3b63c3e03bf2a3c12ef2596796c741d/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts#L108
• https://github.com/angular/angular/issues/9476

Answer 2

import { ActivatedRoute } from '@angular/router'; 
 

 
export class ClassName { 
 
    
 
    private router = ActivatedRoute; 
 

 
    constructor(r: ActivatedRoute) { 
 
     this.router =r; 
 
    } 
 

 
onSuccess() { 
 
    this.router.navigate(['/user_invitation'], 
 
     {queryParams: {email: loginEmail, code: userCode}}); 
 
} 
 

 
} 
 

 

 
Get this values: 
 
--------------- 
 

 
ngOnInit() { 
 
    this.route 
 
     .queryParams 
 
     .subscribe(params => { 
 
      let code = params['code']; 
 
      let userEmail = params['email']; 
 
     }); 
 
}

Ref: https://angular.io/docs/ts/latest/api/router/index/NavigationExtras-interface.html