Даччыныя маршруты ў Angular

Можа такое быць, што ў кампаненце, які ужо задзейнічаны ў роўтынгу, таксама ёсць даччыныя кампаненты. Можна зрабіць так, каб гэтыя даччыныя кампаненты таксама паказваліся праз роўтынг.

Для прыкладу няхай у нас ёсць кампанент Aaaa. Мы звяртаемся да яго праз урл /aaaa/. Зробім яшчэ два даччыныя кампаненты: Chix і Chiy. Будзем іх паказваць унутры прадстаўлення кампанента Aaaa. У Aaaa будзе ўласны тэг router-outlet, у якім у залежнасці ад URL будзе паказвацца альбо адзін, альбо другі даччыны кампанент.

Ітак, давайце рэалізуем апісанае.

Створiм першы даччыны кампанент:

terminalng generate component chix

Створiм другі даччыны кампанент:

terminalng generate component chiy

Напiшем асобныя даччыныя маршруты:

app/app.component.tslet childRoutes: Routes = [
  { path: 'chix', component: ChixComponent },
  { path: 'chiy', component: ChiyComponent },
];

Дадамо іх да маршруту кампанента Aaaa у якасці даччыных:

app/app.component.tsconst appRoutes: Routes = [
  {
    path: 'aaaa',
    component: AaaaComponent,
    children: childRoutes
  },
];

Шлях з маршруту бацькоўскага кампанента будзе пачаткам шляху даччынага. Гэта значыць, што дачыныя кампаненты будуць даступныя па наступных урлах: /aaaa/chix і /aaaa/chiy.

Давайце цяпер наладзім кампанент Aaaa. Імпартуем тэг для роўтынгу:

app/aaaa/aaaa.component.tsimport { RouterOutlet } from '@angular/router';

Пропiшем яго ў дэкаратары:

app/aaaa/aaaa.component.ts@Component({
  ......
  imports: [RouterOutlet],
  ......
})

Уставім тэг у прадстаўленне:

app/aaaa/aaaa.component.html<p>it works</p>
<router-outlet></router-outlet>

Цяпер можна будзе звяртацца да даччыных кампанентаў па іх урлах і гэтыя кампаненты будуць паказвацца. Паспрабуйце!