Stijn Van Bael Stijn Van Bael - 2 months ago 19
Dart Question

How to nest 2 or more routing levels with parameters in Angular 2 on Dart

I have an Angular 2 application written in Dart that has multiple nested routes with parameters.

The highest level route has a parameter "category" and works perfectly:

@RouteConfig(const [
const Route(path: '/', name: 'Empty', component: Empty, useAsDefault: true),
const Route(path: '/categories/:category/...', name: 'Category', component: Category)
])
class AppComponent { /* Content omitted */ }


HTML:

<a [routerLink]="['Category', {'category': cat['id']}]">{{cat['name']}}</a>


Category has a RouteConfig as well which defines a parameter "product":

@RouteConfig(const [
const Route(path: '/', name: 'Empty', component: Empty, useAsDefault: true),
const Route(path: '/products/:product', name: 'Product', component: Product)
])
class Category { /* Content omitted */ }


When I try to create a link to a product like this:

<a [routerLink]="['Category/Product', {'category': id, 'product': product['id']}]">{{product['name']}}</a>


I get following error:

Route generator for 'category' was not included in parameters passed.


I also tried
Product
and
./Product
in the link, both of which resulted in following error:

Component "AppComponent" has no route named "Product".


I have pushed the full source to Github: https://github.com/stijnvanbael/angular2-demo

Answer

This might do what you want:

<a [routerLink]="['/Category', {'category': id}, 'Product', {'product': product['id']}]">{{product['name']}}</a>