Angular-тағы баламаршруттар

Маршруттауда қолданылатын компоненттің ішінде бала компоненттер де болуы мүмкін. Бұл бала компоненттердің де маршруттау арқылы көрсетілуін жасауға болады.

Мысал ретінде, бізде Aaaa компоненті бар делік. Оған /aaaa/ URL арқылы жетеміз. Тағы екі бала компонент жасайық: Chix және Chiy. Оларды Aaaa компонентінің ішінде көрсетеміз. Aaaa компонентінің өз router-outlet тегі болады, оның ішінде URL-ге байланысты бірінші не екінші бала компонент көрінеді.

Енді сипатталғанды жүзеге асырайық.

Бірінші бала компонентті жасайық:

terminalng generate component chix

Екінші бала компонентті жасайық:

terminalng generate component chiy

Бөлек баламаршруттарды жазайық:

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
  },
];

Ата компонент маршрутының жолы бала компонент жолының басы болады. Бұл бала компоненттерге келесі URL арқылы жетуге болады деген сөз: /aaaa/chix және /aaaa/chiy.

Енді Aaaa компонентін баптайық. Маршруттау тегін импорттаймыз:

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

Оны декораторда жазайық:

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

Тегті көрініске енгіземіз:

app/aaaa/aaaa.component.html<p>жұмыс істейді</p>
<router-outlet></router-outlet>

Енді бала компоненттерге олардың URL арқылы жетуге болады және бұл компоненттер көрінеді. Көріңіз!