Multiple parameters in Angular 2

Question

I am trying to set up a browser to browse through a tree. Every time a leave is selected, its children can be selected.

Since I want to make generic, I only want to specify one route.

Unfortunatly, that does not really work... This works

RouterModule.forRoot( [
{ path: '', redirectTo: '/browser', pathMatch: 'full' },
{
    path: 'browser', children: [
    {
        path: '',
        component: BrowserComponent
    },
    {
        path: '**',
        component: BrowserComponent
    }
]
},

] )

But then I am not able to read the params. This prints an emtpy object

this.route.params.forEach((params: Params) => {
   console.log(params);
});

I think it should be something like this:

{ path: '**/:id', component: BrowserComponent }

But that does also not work..:/ Can somebody tell me what I'm doing wrong? Thanks in advance.

PS: In rails I would do it like this:

get 'browser/*id',

Yes. this.route is declared in the costructor private route: ActivatedRoute — m13r
– m13r, Commented Nov 14, 2016 at 9:37
I have add the complete route config. Its still very small... — m13r
– m13r, Commented Nov 14, 2016 at 10:52
The ** path is the wildcard path as you know. Are you trying to pass a parameter to the wildcard route? — eko
– eko, Commented Nov 14, 2016 at 11:57

eko · Accepted Answer · 2016-11-14 12:40:11Z

1

Here's a plunker: http://plnkr.co/edit/kWSOa8i6095e0a5pBlgq?p=preview

In order to get the params change the routeconfig like this:

RouterModule.forRoot( [
{ path: '', redirectTo: '/browser', pathMatch: 'full' },
{
    path: 'browser', children: [
    {
        path: ':id',
        component: BrowserComponent
    },
    {
        path: '**',
        component: AnotherComponent
    }
]
},

This way, when the user goes to the url browser/1, you can see 1 in the params. I also suggest you to change the component of the wildcard route (**) because I assume you are going to use a parameter inside your BrowserComponent and if your user doesn't provide a parameter it should go to an error page.

edited Nov 14, 2016 at 12:40

answered Nov 14, 2016 at 12:16

eko

40.8k11 gold badges79 silver badges104 bronze badges

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

7 Comments

m13r Over a year ago

This does only work with one parameter. browser/1/2 does not work.

eko Over a year ago

@Moritz of course. You need a deeper route config for that. Not forRoot but forChildren

m13r Over a year ago

obviously I could add another static route. However, it should be generic since I do not know how many IDs it will be. It can be /browser, /browser/1, /browser/1/2, /browser/1/2/3... Finally, I only care about the last id. The other IDs will be used for history, e.g. breadcrumb.

eko Over a year ago

@m13r like this question? stackoverflow.com/questions/40669434/…

m13r Over a year ago

Exactly, where N >= 0.

|

Collectives™ on Stack Overflow

Multiple parameters in Angular 2

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related