Menyediakan Perutean Asas dalam Angular

Sekarang mari kita sediakan perutean. Mari kita buat supaya jika URL /aaaa/ dimasukkan ke dalam bar alamat penyemak imbas, komponen pertama akan dipaparkan, dan jika /bbbb/ dimasukkan, komponen kedua akan dipaparkan.

Penetapan sedemikian dilakukan dalam fail app.routes.ts. Pertama, kita perlu mengimport komponen kami:

import { AaaaComponent } from './aaaa/aaaa.component';
import { BbbbComponent } from './bbbb/bbbb.component';

Dan sekarang kita perlu menyatakan URL mana yang sepadan dengan komponen mana. Untuk melakukan ini, kita perlu membuat array objek khas dengan laluan (routes). Dalam setiap objek, akan ada kunci path, di mana URL ditetapkan (tanpa garis condong di hujung), dan kunci component, di mana komponen yang dipaparkan pada URL ini ditetapkan:

export const routes: Routes = [
	{ path: 'aaaa', component: AaaaComponent },
	{ path: 'bbbb', component: BbbbComponent },
];

Walau bagaimanapun, penetapan perutean sahaja tidak mencukupi. Kita perlu menentukan tempat di komponen induk di mana komponen kami akan dipaparkan. Kita akan menangani perkara ini dalam pelajaran seterusnya.

Sediakan perutean dalam fail app.routes.ts.