CODEWITHSUNDEEP
angularangular2-routing
Kunso Solutions
Kunso Solutions

Reputation: 7630

Default route parameter Angular2: Nested routing

I am trying to create nested routes in Angular2.

Here is a code of my Components: app.partial.html

<nav class="navbar navbar-default">
<div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li><a [routerLink]="['Git']">Git Cmp</a></li>
            <li><a [routerLink]="['Courses']">Courses Cmp</a></li>
            <li><a [routerLink]="['Archives']">Archives Cmp</a></li>
        </ul>
    </div>
</div>

Here is my main view, in which I have included [routerLink]=['Archieves'] link to the child component with it's own routing.

app.component.ts

@RouteConfig([
    { path: '/git', name: 'Git', component: GitComponent },
    { path: '/courses', name: 'Courses', component: CoursesComponent, useAsDefault: true },
    { path: '/archives/...', name: 'Archives', component: ArchivesComponent },
    { path: '/*other', name: 'Other', redirectTo: ['Git'] }
])

Here is Parent component routing configuration which includes /archives/... route which expect child routes.

archives.component.ts

 @RouteConfig([
    { path: '/:id', name: 'Archive', component: ArchiveComponent, useAsDefault: true }
])

And you can see routing configuration of child component above. As you can see, it has id parameter, so while we are redirecting to this route, it expect some value.

Question

The question is: Is there is a way to set default value for the route param. Because I have an Error caused by my link which is not include needed route parameter.

EXCEPTION: Route generator for 'id' was not included in parameters passed. in [['Archives'] in AppComponent@18:23]

Thank you for any help!

Upvotes: 1

Views: 631

Answers (1)

Ankit Singh
Ankit Singh

Reputation: 24945

[routerLink]="['Archives']"

should be 

[routerLink]="['Archives/Archive', {id: 'someId'}]"

or

[routerLink]="['Archives', {id: 'someId'}]"

can work as well. I'm not sure

Update

You can get routeParams in your ArchiveComponent (because that is where it's routed to by router) like below, but not in ArchivesComponent

export class ArchiveComponent {
      date: string;
      constructor(private routeParams: RouteParams) {

        console.log(this.routeParams.get('id'));
      }
  }

Upvotes: 1

Related Questions