Angular 2 routerLink With Semantic URL

Question

I'm trying to build a routerLink on a list page.

I have a Route defined like so:

{ path: '/brands/:brandId/regions', component: RegionListComponent }

The end result link would look like this:

<a href="/brands/100/regions">Brand Regions</a>

I'm trying to figure out how to write the routerLink:

<a [routerLink]="['/brands/?????'], ????">regions</a>

The above link shows up in a table so the brandId would be based on an ngFor iteration.

The ???? are where I'm not sure quite what to do.

Günter Zöchbauer · Accepted Answer · 2016-05-31T16:53:19.407

1

<a [routerLink]="['/brands/' + item.id + '/regions']">regions</a>

or

<a [routerLink]="['/brands', item.id, 'regions']">regions</a>

depending if the route segments are on different components or all on the root component.

edited May 31 '16 at 16:53

answered May 31 '16 at 16:48

Both give the following exception: ` Can't bind to 'routerLink' since it isn't a known native property (" {{brand.name}} {{brand.description}} ][routerLink]="['/brands, brand.id, regions']">regions ` – Gregg May 31 '16 at 16:51
Sorry, forgot some quotes on the 2nd example. The error message doesn't seem to be related to how the Url is created http://stackoverflow.com/questions/34317044/angular2-exception-cant-bind-to-routerlink-since-it-isnt-a-known-native-pro/34317846#34317846 – Günter Zöchbauer May 31 '16 at 16:52
Got it. I was missing the `ROUTER_DIRECTIVES` – Gregg May 31 '16 at 16:56

1 Answers1