2016-06-30 15 views
25

Ich versuche, mit einer Mischung aus Routen- und Abfrageparametern zu einer Route in Angular 2 zu navigieren. HierAngular 2 router.navigate

ist ein Beispiel Route, wo die Route der letzte Teil des Pfades ist:

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

Versuch zu verbinden das Array wie mit so:

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

ich keine Fehler bekommen und von dem, was ich verstehen kann, sollte das funktionieren.

Die Winkel 2 docs (im Moment) haben die folgenden als Beispiel:

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

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

Kann jemand sehen, wo ich falsch gehe? Ich bin auf Router 3.

Antwort

46

Wenn das erste Segment nicht mit / beginnt, ist es eine relative Route. router.navigate braucht einen relativeTo Parameter für die relative Navigation

Entweder man die Route machen absolut:

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

oder Sie passieren relativeTo

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

Siehe auch

+1

Kennen Sie dieses Themas ist alt - aber ein paar kurze Fragen für mein Verständnis: 1. Im zweiten Fall, der oben shouldn‘ t es sein 'this.router.navigate (** ['foo ** - Inhalt', 'bar-contents', ....' (ohne das/am Anfang des ersten Segments, da es relativ ist) 2. Abgesehen von diesem .currentActivatedRoute was sind die anderen möglichen Werte für relativeTo? – Vikas

+0

Wenn Sie möchten, dass es relativ ist, dann lassen Sie das führende '/' weg, das hatte ich nicht vor. Jede Route, auf der der Pfad relativ sein soll. –

+1

Danke - aber in Ihrer Antwort haben Sie erwähnt, dass, wenn das erste Segment mit einem/beginnt, es eine absolute Navigation ist. Warum sollte der Verwandte also benötigt werden? – Vikas

5

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