Rendering a child route in the parent in Angular 4

Question

With Angular 2, I could make a child route render "over" its parent by defining an empty path and creating an essentially empty base component. I am trying to accomplish something similar with the new Angular router (version 4.3.1), but have hit a roadblock.

To reproduce my problem, here's a Plunker. The routes are defined as:

[{
    path: '',
    redirectTo: "/master",
    pathMatch: "full"
}, {
    path: 'master',
    component: MasterComponent,
    children: [{
        path: 'detail/:value',
        component: DetailComponent,
        children: [{
            path: 'subdetail',
            component: SubDetailComponent
        }]
    }]
}]

When I navigate to a detail page, the master page is still visible because I have added a <router-outlet></router-outlet> to MasterComponent. What I need is to replace the master view with the detail. I can accomplish this by making detail/:value a sibling of master rather than a child, but this isn't logically correct in my application and breaks my breadcrumbs.

Is there any proper way to handle this kind of pattern, or will I have to pick a workaround, such as showing and hiding the intended route or manually specifying a dedicated "main" outlet for every link?

The only existing solution that comes close is to define a dummy parent component, but this only works one-level down. If my detail page has another sub-detail page that should also replace master, it gets very messy.

Is there any route-level flag I can set or design pattern to implement to elegantly accomplish this? I am an Angular 2 beginner, but I feel as though something like this should be simple.

score 2 · Accepted Answer · answered Jul 28 '17 at 19:11

2

First, there is no "new" router in 4.3.1. It's the same router from 2.x.

Second, there were a few changes I needed to make to your plunker to make it work appropriately. The key change was this in the master.component.ts:

<a [routerLink]="['/detail', 5]">

I added a slash. Without the slash it was looking for a route named master/detail/5

The route definition is now flat, so everything will appear "under" your main header.

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'master',
    pathMatch: 'full'
  },
  {
    path: 'master',
    component: MasterComponent
  },
  {
    path: 'detail/:value',
    component: DetailComponent
  }
];

The updated plunker is here: https://plnkr.co/edit/EHehUR6qSi248vQPDntt?p=preview

answered Jul 28 '17 at 19:11

DeborahK

57,520
12
104
129

Hi DeborahK, thank you! I was hoping I wouldn't have to flatten out my routes, as this breaks breadcrumbs. Is there no other way to force a route to be rendered at the base level? – Scott Jul 28 '17 at 19:16
How are you implementing bread crumbs? If you want the new content to completely replace the old content then it cannot be a child route without a bunch of finagling. But you could potentially set the paths to be `master/detail/:value` if the bread crumb implementation is reading the full URL. – DeborahK Jul 28 '17 at 19:19
I'm using a modified version of [this technique](http://brianflove.com/2016/10/23/angular2-breadcrumb-using-router/), which just recurses through each active route. Having operable breadcrumbs is definitely a secondary objective to having the page display correctly though. – Scott Jul 28 '17 at 19:21
Did you read the first comment in the discussion section? Looks like several other devs are trying to do the same thing. The last person proposed a solution. – DeborahK Jul 28 '17 at 19:28
I'll be honest, since comments aren't often a great source of information (except for both of these situations of course), I completely skipped them. Looks like some people have some great solutions to the problem though; thanks for pointing that out. I'm not sure who downvoted your answer, but it answers my question and fixes my routes. Thank you very much! – Scott Jul 28 '17 at 19:33
Glad it helped. Yea, I wish all down votes required entry of a reason ... – DeborahK Jul 28 '17 at 19:47
How does it possible to generate breadcrumb out of flat structure ? So far what I know this solution only loads content to parent router-outlet by it cannot help to generate breadcrumb hierarchy ? And I would really not accept as answer. Anyways @Scott have you found the way to generate breadcrumb out of flat router structure ? – Techno Cracker Oct 13 '17 at 05:00
Modified question with breadcrumb navigation when i come across this situation is posted here https://stackoverflow.com/questions/47976360/angular-2-4-5-load-child-component-to-main-router-outlet – Techno Cracker Dec 28 '17 at 05:41

Rendering a child route in the parent in Angular 4

1 Answers1