2016-06-30 15 views
25

Sto provando a navigare verso una rotta in Angular 2 con un mix di parametri di route e query.Angular 2 router.navigate

Ecco un itinerario esempio in cui il percorso è l'ultima parte del percorso:

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

tentativo di collegamento mediante la matrice in questo modo:

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

Non ricevo errori e da quello che posso capire, dovrebbe funzionare.

angolare 2 documenti (al momento) hanno il seguente come esempio:

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

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

chiunque può vedere dove sto andando male? Sono sul router 3.

risposta

46

Se il primo segmento non inizia con / è un percorso relativo. router.navigate ha bisogno di un parametro relativeTo per la navigazione relativa

O si effettua il percorso assoluto:

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

o si passa relativeTo

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

Vedi anche

+1

Conoscere questa discussione è vecchio - ma un paio di domande veloci per la mia comprensione: 1. Nel secondo caso di cui sopra shouldn' t è 'this.router.navigate (** ['foo ** - content', 'bar-contents', ....' (senza il/all'inizio del primo segmento, poiché è relativo) 2. Oltre a this.currentActivatedRoute quali sono gli altri valori possibili per relativo? – Vikas

+0

Se si desidera che sia relativo, quindi omettere il leader '/', non intendevo quello. Qualsiasi percorso a cui desideri che il percorso sia relativo. –

+1

Grazie - ma nella tua risposta hai detto che se il primo segmento inizia con un /, allora è una navigazione assoluta. Quindi perché il parente dovrebbe essere richiesto? – 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']; 
 
     }); 
 
}

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