javascript - link - Angular 2 router.navigate

router.navigate angular 6

Question

Estoy intentando navegar a una ruta en Angular 2 con una combinación de ruta y parámetros de consulta.

Aquí hay una ruta de ejemplo donde la ruta es la última parte de la ruta:

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

Intentando vincular usando la matriz como tal:

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

No recibo ningún error y por lo que puedo entender, esto debería funcionar.

Los documentos de Angular 2 (por el momento) tienen lo siguiente como ejemplo:

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

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

¿Alguien puede ver dónde me estoy equivocando? Estoy en el enrutador 3.

Answer 1

Si el primer segmento no comienza con / es una ruta relativa. router.navigate necesita un parámetro relativeTo para la navegación relativa

O haces la ruta absoluta:

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

o pasas relativeTo

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

Ver también

• 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