Angular: Child Route Matching

Question

Suppose we have the following routes:

{
    path: 'a',
    component: AComponent,
    children: [
        {
            path: '',
            component: BComponent
        },
        {
            path: '',
            component: CComponent,
            children: [
                { path: '', component: DComponent }
            ]
        }
    ]
}

And the following URL is pasted into the browser's address bar:

http://localhost:4200/a

Questions

How does the Router know what component to display?
Would all the four components (A, B, C, D) be displayed?
Where would each component be displayed?
- Does every parent component always have its own RouterOutlet, so each component along a route of parent/child/grand-child/etc. gets displayed inside its parent's respective RouterOutlet?
- Usually, when displaying a route with child routes, each component is displayed inside its parent RouterOutlet. But, if only AComponent had a RouterOutlet, where would BComponent, CComponent and DComponent be displayed?

mgm87 mgm87 · Accepted Answer · 2018-01-08T23:22:29

Given that you aren't getting any sort of error the router will give you the first matching route it found. In this case BComponent. Only one component can be shown in a router outlet (to do otherwise you need something like auxRoute).

If CComponent had a route like 'c' you could access it from the route http://localhost:4200/a/c then you would get CComponent with DComponent in CComponents router outlet.

Hope that helps.

Angular: Child Route Matching

1 Answers