¿Cómo navego a una ruta de hermanos?

Supongamos que tengo este router config

export const EmployeeRoutes = [
   { path: 'sales', component: SalesComponent },
   { path: 'contacts', component: ContactsComponent }
];

Y han navegado a la SalesComponent a través de esta URL

/department/7/employees/45/sales

Ahora me gustaría ir a contacts, pero como no tengo todos los parámetros para una ruta absoluta (por ejemplo, el ID del departamento, 7 en el ejemplo anterior) Preferiría llegar allí utilizando un enlace relativo, por ejemplo, 

[routerLink]="['../contacts']"

O 

this.router.navigate('../contacts')

Que desafortunadamente no funciona. Puede que haya una solución obvia, pero no la veo. ¿Alguien puede ayudar aquí, por favor?

Author: Thorsten Westheider, 2016-07-28
Source

2 answers

Si está utilizando el nuevo enrutador (3.0.0-beta2), puede usar la ruta ActivatedRoute para navegar a la ruta relativa de la siguiente manera: 

constructor(private router: Router, private r:ActivatedRoute) {} 

///
goToContact() {
  this.router.navigate(["../contacts"], { relativeTo: this.r });
}
 59
Author: Harry Ninh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-07-28 11:00:55

La directiva routerLink siempre trata el enlace proporcionado como un delta a la URL actual: 

[routerLink]="['/absolute']"
[routerLink]="['../../parent']"
[routerLink]="['../sibling']"
[routerLink]="['./child']"     // or
[routerLink]="['child']" 

// with route param     ../sibling;abc=xyz
[routerLink]="['../sibling', {abc: 'xyz'}]"
// with query param and fragment   ../sibling?p1=value1&p2=v2#frag
[routerLink]="['../sibling']" [queryParams]="{p1: 'value', p2: 'v2'}" fragment="frag"

El método navigate() requiere un punto de partida (es decir, el parámetro relativeTo). Si no se proporciona ninguna, la navegación es absoluta:

constructor(private router: Router, private route: ActivatedRoute) {}

this.router.navigate("/absolute/path");
this.router.navigate("../../parent", {relativeTo: this.route});
this.router.navigate("../sibling",   {relativeTo: this.route});
this.router.navigate("./child",      {relativeTo: this.route}); // or
this.router.navigate("child",        {relativeTo: this.route});

// with route param     ../sibling;abc=xyz
this.router.navigate(["../sibling", {abc: 'xyz'}], {relativeTo: this.route});
// with query param and fragment   ../sibling?p1=value1&p2=v2#frag
this.router.navigate("../sibling", {relativeTo: this.route, 
    queryParams: {p1: 'value', p2: 'v2'}, fragment: 'frag'});

// RC.5+: navigate without updating the URL 
this.router.navigate("../sibling", {relativeTo: this.route, skipLocationChange: true});
 37
Author: Mark Rajcok,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-11 04:15:44