Как перейти к следующему маршруту?

Предположим, что я получил конфигурацию этого маршрутизатора

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

и перешли к SalesComponent через этот URL

/department/7/employees/45/sales

Теперь я хотел бы перейти к contacts, но поскольку у меня нет всех параметров для абсолютного маршрута (например, идентификатор отдела, 7 в приведенном выше примере), я бы предпочел добраться туда используя относительную ссылку, например

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

или

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

который, к сожалению, не работает. Там может быть очевидное решение, но я этого не вижу. Может ли кто-нибудь помочь здесь, пожалуйста?

Ответ 1

Если вы используете новый маршрутизатор (3.0.0-beta2), вы можете использовать ActivatedRoute для перехода к относительному пути следующим образом:

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

///
goToContact() {
  this.router.navigate(["../contacts"], { relativeTo: this.r });
}

Ответ 2

Директива RouterLink всегда рассматривает предоставленную ссылку как дельта для текущего URL:

[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"

Метод navigate() требует начальной точки (т.е. параметра relativeTo). Если ни один не указан, навигация абсолютна:

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});