Angular-daky çagalaryň marşrutlary

Routingde ulanylan komponentiň içinde-de çaga komponentleri bolup biler. Bu çaga komponentleriniň hem routing arkaly görkezilmegini üpjün etmek mümkin.

Mysal üçin, bizde <Aaaa> komponenti bar diýeliň. Biz oňa </aaaa/> URL arkaly ýüz tutýarys. Ýene-de iki sany çaga komponentini düzeliň: <Chix> we <Chiy>. Olary <Aaaa> komponentiniň şekillendirişi içinde görkezeris. <Aaaa>-iň öz <router-outlet> tegleri bolup, olarda URL-ga baglylykda ýa-da bir, ýa-da beýleki çaga komponenti görkeziler.

Şeýlelik bilen, beýan edileni amala aşyralyň.

Ilkinji çaga komponentini düzeliň:

terminalng generate component chix

Ikinji çaga komponentini düzeliň:

terminalng generate component chiy

Aýratyn çaga marşrutlaryny ýazalyň:

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

Olary <Aaaa> komponentiniň marşrutyna çagalar hökmünde goşalyň:

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

Ene komponentiň marşrut ýoly çaga ýolunyň başlangyjy bolar. Bu şuny aňladýar, çaga komponentlerine aşakdaky URL-ler arkaly girmek mümkin bolar: </aaaa/chix> we </aaaa/chiy>.

Indi <Aaaa> komponentini sazlalyň. Routing üçin teg import edeliň:

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

Ony dekoratorda görkezeliň:

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

Tegi şekillendirişe goşalyň:

app/aaaa/aaaa.component.html<p>işleýär</p>
<router-outlet></router-outlet>

Indi çaga komponentlerine olaryň URL-leri arkaly ýüz tutup bolup, bu komponentler görkeziler. Synap görüň!