Child Routing

Child Routing нам потрібен у випадку якщо ми здійснюємо навігацю на вкладеному рівні. Наприклад /routing/child-routing. Тобто ми переходимо на певну сторінку і в межає цієї сторінки здійснюємо додаткову навігацію.

Розглянемо app-routing.module.ts

app-routing.module.ts

// ....
import { TodosComponent } from './pages/todos/todos.component';
import { AboutComponent } from './pages/about/about.component';
import {
  PageNotFoundComponent
} from './pages/page-not-found/page-not-found.component';

const routes: Routes = [
  { path: '', redirectTo: 'todos', pathMatch: 'full' },
  { path: 'todos', component: TodosComponent },
  { path: 'about', component: AboutComponent,
    children: [
      { path: '', redirectTo: 'about-project', pathMatch: 'full', },
      { path: 'about-project', component: AboutProjectComponent },
      { path: 'about-us', component: AboutUsComponent },
      { path: 'about-us/:userId', component: UserComponent }
    ]
  },
  { path: '**', component: PageNotFoundComponent }
];
// ....

Тут доданий новий маршрут { path: 'about-us/:userId', component: UserComponent }.

Токен :userId представляє параметр маршруту. Тобто ми зможемо звернутися до компонента із запитом типу /about-us/6, і число 6 представлятиме параметр userId.

Після того як ми створили Child Routs, для їхнього відображення в батьківському компоненті теж потрібно використовувати директиву <router-outlet></router-outlet>.

about.component.html

<router-outlet></router-outlet>

Завдання

• Створити сторінки about-project, about-us та user.

cmd

ng g c pages/about/about-project

cmd

ng g c pages/about/about-us

cmd

ng g c pages/about/user

• В компоненту about додати навігацію.