Angular 2: multiple <router-exit> for sub-items

Question

Using Angular 2, is there any way to prevent the sub-route from appearing in the main tag

 <router-outlet></router-outlet> 

For example:

 url : "http://mywebsite.com/" MainComponent.ts @Component({ ... template:'<router-outlet></router-outlet>' ... }) @RouteCongif([ {path: '/products', name:'Product', component: Product} ]) 

Displays the helper component in the <router-outlet> tag

Ok, now it's possible to have this configuration:

 url : "http://mywebsite.com/products" ProductComponent.ts @Component({ template: ` ... <div> My list of products ! </div> ... <a [RouteLink]="['ProductDetails', {slug-product-details:product.slug}]"> {{ product.name }} Details </a> ... <sub-router-outlet></sub-router-outlet> ` }) @RouteConfig([ {path: '/:slug-product-details', name:'ProductDetails', component: ProductDetailsComponent}, ]) 

and

 url : "http://mywebsite.com/products/one-product-details" ProductDetailsComponent.ts @Component({ ... template : ` <div> Details of the product : </div> ... ` ... }) 

I want to use a router using an autocontrolled URL and map the route and details template to this type of <sub-router-outlet> tag.

Thank you for your help.

Answer 1

WARNING: The code below only works on Angular2 beta

You can implement helper routing. The file structure should be the same.

app.ts

 @RouteConfig([ ... { path: '/product/...', component: Product, name: 'Product'} { path: '/home', component: Home, name: 'Home'} ... ]) export class App { } 

product.ts

 @Component({ selector: 'product', templateUrl: 'app/components/product/product.html', directives: [ROUTER_DIRECTIVES] }) @RouteConfig([ ... { path: 'product-one', component: ProductOne, name: 'Product-one' }, { path: 'product-two', component: ProductTwo, name: 'Product-two', useAsDefault: true }, ... ]) export class Product { constructor(location: Location, public router: Router) {} goToProductOne() { this.router.navigate(['Product','Product-one']) } } 

product.html

 ... <a [routerLink]="['./Product-one']"> Product One </a> <a [routerLink]="['/Home']"> Home </a> ... 

Where ['./Product-one'] is the subroutine, and ['/ Home'] is the parent route