angular - navigationend - ¿Cómo navego a una ruta de hermanos?

title angular 6

Question

Supongamos que tengo esta configuración de enrutador

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

y ha navegado hacia SalesComponent través de esta URL

/department/7/employees/45/sales

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

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

o

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

que lamentablemente no funciona. Puede haber una solución obvia pero no la estoy viendo. ¿Alguien puede ayudar aquí por favor?

Answer 1

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 inicio (es decir, el parámetro relativeTo ). Si no se proporciona ninguno, 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});

Answer 2

Si está utilizando el nuevo enrutador (3.0.0-beta2), puede usar el ActivetedRoute 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 });
}