SubRoutes with rc1 angular router

1
votes

I'm trying to rewrite angular's router with rc1 version. I have a feature group which has a child router and define it with a non-terminal route like so:

{ path: '/contacts/...', component: ContactsComponent}

But if i try to navigate like this:

<a [routerLink]="['/contacts']"></a>

It says: "Cannot match any routes. Current segment: 'contacts'. Available routes: ['/dashboard', '/contacts/...']"

If i tried to pass /contacts/... to the router link - it would suddenly start working, but there would be "..." at the end of url as well. So that lead me to the conclusion that maybe the "..." is no longer needed, so i rewrote the route like this:

{ path: '/contacts', component: ContactsComponent}

So now my contacts component gets loaded, but i have the following subroute defined in ContactsComponent:

{ path: '/group/:id', component: GroupComponent }

And a router link:

<a [routerLink]="['./group', {id: group.id}]">{{ group.name }}</a>

Which does not work with the following error:

Cannot match any routes. Current segment: 'group;id=1'. Available routes: ['/', '/group/:id']

I've also tried router links like "/group" and "/contacts/group", none of them work.

Does anyone know how to use the rc1 router for sub-routing with non-terminal paths?

2
angularangular2-routing
You should use the @angular/router-deprecated, as the new router is still stuffed with bugs – RobSeg
We are at the beginning of a new project. I'm afraid it will take too much time to change the deprecated router into the new one and so we're doing it now, since there's not that many things to change – marius

2 Answers

1
votes

I'm assuming your url is like this: /contacts/group/5 to pass id 5 to the group component in a child route of the contacts component. The proper route is relative to the child component from within, i.e. ./group/5 for group id 5.

I got it to work using a method to navigate like in the sample from their docs:

onSelect(crisis: Crisis) {
  // Relative link would be `./groups/${group.id}` in your case
  this.router.navigate([`./${crisis.id}`], this.currSegment);
}

But though it's not documented, you can just pass the value as the second array element, not an object. Here clicking on the number navigates with onSelect() and clicking on the name uses routerLink (plnkr)

  <!-- [routerLink]="['./', group.id]"> -->
  <li *ngFor="let crisis of crises"
    <span class="badge" (click)="onSelect(crisis)">{{crisis.id}}</span> 
    <a [routerLink]="['./', crisis.id]">{{crisis.name}}</a>
  </li>
0
votes

I think the point is that it is trying to

You could try something like this 

<a [routerLink]="getLink()">{{ group.name }}</a>

getLink() {
  return [`group/${group.id}`]
}

I hope this helps