Rute Anak di Angular

Dapat terjadi bahwa dalam komponen yang sudah digunakan dalam perutean, juga terdapat komponen anak. Kita dapat mengaturnya agar komponen anak ini juga ditampilkan melalui perutean.

Sebagai contoh, misalkan kita memiliki komponen Aaaa. Kita mengaksesnya melalui URL /aaaa/. Mari buat dua komponen anak lagi: Chix dan Chiy. Kita akan menampilkannya di dalam tampilan komponen Aaaa. Aaaa akan memiliki tag router-outlet-nya sendiri, di mana tergantung pada URL, komponen anak pertama atau kedua akan ditampilkan.

Jadi, mari kita implementasikan yang telah dijelaskan.

Buat komponen anak pertama:

terminalng generate component chix

Buat komponen anak kedua:

terminalng generate component chiy

Tulis rute anak terpisah:

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

Tambahkan mereka ke rute komponen Aaaa sebagai anak:

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

Jalur dari rute komponen induk akan menjadi awal jalur untuk anak. Ini berarti komponen anak akan dapat diakses melalui URL berikut: /aaaa/chix dan /aaaa/chiy.

Sekarang mari kita konfigurasi komponen Aaaa. Impor tag untuk perutean:

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

Tuliskan dalam dekorator:

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

Sisipkan tag ke dalam tampilan:

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

Sekarang komponen anak dapat diakses melalui URL mereka dan komponen-komponen ini akan ditampilkan. Cobalah!