A child route defines a URL segment beneath a parent route and lets Angular display nested content inside the parent component. Configure child routes with the parent route’s children property, then place a router-outlet in the parent template. section 25.4 section 25.4.1
Use child routes to:
- Display different components within a shared parent layout. section 25.4
- Match a complete URL made from both parent and child segments. section 25.4
- Reuse a Routes object across multiple top-level routes. section 25.4.2
- Use route parameters and additional child routes at nested levels. section 25.4.2
Nested table routes
A table route can host separate components for product and category counts: { path: "table", component: TableComponent, children: [ { path: "products", component: ProductCountComponent }, { path: "categories", component: CategoryCountComponent } ] }. The parent renders a router-outlet, so /table/products displays ProductCountComponent and /table/categories displays CategoryCountComponent; /table displays neither child component. section 25.4 section 25.4.1
Listing 25.16. Configuring routes in the app.routing.ts file in the src/app folder
import { Routes, RouterModule } from "@angular/router";
import { TableComponent } from "./core/table.component";
import { FormComponent } from "./core/form.component";
import { NotFoundComponent } from "./core/notFound.component";
import { ProductCountComponent } from "./core/productCount.component";
import { CategoryCountComponent } from "./core/categoryCount.component";
const routes: Routes = [
{ path: "form/:mode/:id", component: FormComponent },
{ path: "form/:mode", component: FormComponent },
{ path: "does", redirectTo: "/form/create", pathMatch: "prefix" },
{
path: "table",
component: TableComponent,
children: [
{ path: "products", component: ProductCountComponent },
{ path: "categories", component: CategoryCountComponent }
]
},
{ path: "table/:category", component: TableComponent },
{ path: "table", component: TableComponent },
{ path: "", redirectTo: "/table", pathMatch: "full" },
{ path: "**", component: NotFoundComponent }]
export const routing = RouterModule.forRoot(routes, {
bindToComponentInputs: true
});
Inspect the complete route configuration showing the children property and the ordering of specific routes before parameterized routes. section 25.4
Table 25.4. The New URLs supported by the example application
|
Name
|
Description
|
|
/table/:category/products
|
This route will filter the contents of the table and select the
ProductCountComponent.
|
|
/table/:category/categories
|
This route will filter the contents of the table and select the
CategoryCountComponent.
|
Compare parameterized nested URLs such as /table/:category/products and /table/:category/categories. section 25.4.2
