Angular-da Qo'shimcha Marshrutlar

Marshrutlashda qatnashgan komponentda qo'shimcha komponentlar ham bo'lishi mumkin. Ushbu qo'shimcha komponentlarni ham marshrutlash orqali ko'rsatish mumkin.

Misol uchun, bizda Aaaa komponenti bor deb faraz qilaylik. Biz unga /aaaa/ URL orqali murojaat qilamiz. Yana ikkita qo'shimcha komponent yaratamiz: Chix va Chiy. Ularni Aaaa komponenti ichida ko'rsatamiz. Aaaa o'zining router-outlet tegga ega bo'ladi, unga URLga qarab bir yoki ikkinchi qo'shimcha komponent ko'rsatiladi.

Xo'sh, endi tasvirlangan narsani amalga oshiramiz.

Birinchi qo'shimcha komponentni yaratamiz:

terminalng generate component chix

Ikkinchi qo'shimcha komponentni yaratamiz:

terminalng generate component chiy

Alohida qo'shimcha marshrutlarni yozamiz:

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

Ularni Aaaa komponenti marshrutiga qo'shimcha sifatida qo'shamiz:

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

Asosiy komponent marshrutining yo'li qo'shimcha komponent yo'lining boshlanishi bo'ladi. Bu shuni anglatadiki, qo'shimcha komponentlar quyidagi URLlar orqali mavjud bo'ladi: /aaaa/chix va /aaaa/chiy.

Endi Aaaa komponentini sozlaymiz. Marshrutlash tegi import qilamiz:

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

Uni dekoratorda ko'rsatamiz:

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

Tegni ko'rinishga joylashtiramiz:

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

Endi qo'shimcha komponentlarga ularning URLlari orqali murojaat qilish mumkin va bu komponentlar ko'rsatiladi. Sinab ko'ring!