Default route parameter Angular2: Nested routing

Question

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!

What redirect are your talking about? The redirect is to Git but the error comes from Archive. What action produces this error? — Günter Zöchbauer
– Günter Zöchbauer, Commented Apr 27, 2016 at 12:48
Error produced by an Archives routes, do not pay attention to the other routes, they are working as expected. The issue is in the archives->archive route. — Kunso Solutions
– Kunso Solutions, Commented Apr 27, 2016 at 12:52

Ankit Singh · Accepted Answer · 2016-04-27 13:33:25Z

1

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

edited Apr 27, 2016 at 13:33

answered Apr 27, 2016 at 12:36

Ankit Singh

25k12 gold badges68 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Kunso Solutions Over a year ago

The second point of your answer is working fine, but I stuck with the different problem know. First of all maybe you know how to do such default value from the ts code, not from the view. And second problem, I cant catch this value in the Component constructor, it returns an empty object.

Ankit Singh Over a year ago

how are you trying to pass that id , is it static or dynamic ? If it's static than just right it in place of :id if it's not part of the url, define it in the route config's third parameter, like gunter suggested in his answer and if it's dynamic and part of the url than this is the way to go.

Kunso Solutions Over a year ago

id will be dynamic, but for know, I can not catch it even if it is static. I tried your answer example, and Error is gone. but the routeparams in the child component is empty.

Kunso Solutions Over a year ago

Git commit with changes Here is repo of my sample project, Thank you for help!

Kunso Solutions Over a year ago

that new line which you provide for me returns null

|

Collectives™ on Stack Overflow

Default route parameter Angular2: Nested routing

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related