Okay, I figured out a way that I don't like, but in so doing, I think it is generally not a nice idea (having child components manage their own routes), I think we need to manage the routes from the top level. Let me explain.
First, a working solution is on Plunker here: https://embed.plnkr.co/s9PqXLvpee5HuVUXTbOM/ The key changes are in the app_routes.ts file and the product.ts file. *app_routes.ts* import { provideRouter, RouterConfig } from '@angular/router'; import { ProductDetailComponent } from './components/product'; import { HomeComponent } from './components/home'; export const appRoutes: RouterConfig = [ { path: '' , component: HomeComponent }, { path: 'product/:id', component: ProductDetailComponent } ]; export const APP_ROUTER_PROVIDERS = [ provideRouter(appRoutes)]; It is changed to just have the navigation routes for the top level. *product.ts* (relevant parts): const navRouteChildren: Route [] = [ { path: 'seller/:id', component: SellerInfoComponent }, { path: '' , component: ProductDescriptionComponent }]; @Component({ selector: 'product', ... }) export class ProductDetailComponent { productID: string; private sub: any; ... ngOnInit() { this.modifyRoutes(appRoutes); this.sub = this.route.params.subscribe(params => { this.productID = params['id']; }); this.router.navigate([]); } ngOnDestroy() { this.sub.unsubscribe(); } modifyRoutes(routes: RouterConfig) { routes.forEach(routeToCheck => { this.addChildrenIfMatch('product/:id', routeToCheck); }); } addChildrenIfMatch(targetPath: string, targetRoute: Route) { if(targetRoute.path === targetPath) { targetRoute.children = navRouteChildren; } } } The component holds a collection of child routes in an array, then it uses the ngOnInit() method to find the route the children belong to (the modifyRoutes and addChildrenIfMatch methods) and adds the children to the route. Then it has to force navigate (with no path changes) to ensure the new routing options are applied. This works in that both the parent and child navigation routes are maintained. The components would have to know about the overall RouterConfig, and if nested, their parent RouterConfigs (or at least path) but siblings wouldn't need to know each other, and parents wouldn't need to know children. *The problem is deep linking*. If I start navigation at http://home.address/, then the whole app will work fine. If I start at one layer deep in the navigation: http://home.address/#/product/1234 then everything is still fine. But if I have a deep link to the bottom of the tree: http://home.address/#/product/1234/seller/abc then this doesn't work. Since the top level router configuration doesn't know how to handle the seller/:id path, the whole thing breaks, you have to incrementally navigate through the children until you get to the component you want. I am not sure how you fix that without pulling the child routes into the top level route (which is what all the published documents that I could find do, and what my previous example did). It seems like my desired design is destined to fail. So I don't think this is a working solution, and I don't think what I want is really feasible if I want to maintain deep links. -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
