Jika Anda membuat aplikasi Angular dengan banyak halaman, Anda perlu menggunakan perutean untuk menavigasi di antara mereka. Anda dapat melakukan ini dengan membuat daftar rute dengan jalur untuk setiap halaman dalam modul perutean.
Anda kemudian dapat merutekan ke halaman lain dalam file HTML dengan menggunakan tag jangkar. Anda juga dapat merutekan ke halaman lain dalam file TypeScript, menggunakan metode router.navigate().
Cara Membuat Halaman Baru di Aplikasi Angular
Pertama, buat aplikasi Angular baru. Anda juga dapat menggunakan yang sudah ada. Jika Anda tidak terbiasa dengan cara membuat aplikasi Angular baru, Anda dapat mempelajarinya bersama dengan yang lain konsep pengantar yang digunakan dalam Angular.
-
Buat komponen baru di aplikasi Angular Anda menggunakan ng menghasilkan komponen memerintah:
ng menghasilkan komponen rumah - Buka src/app/home/home.component.html file, dan ganti konten saat ini dengan konten baru.
<kelas div="isi">
<h2> Rumah </h2>
<p>
Saya seorang fotografer yang melakukan fotografi pernikahan. Lihat proyek saya!
</p>
<kelas div="kartu">
<h4> John & Amy </h4>
<p> Blue Mountains, Australia </p>
</div>
<kelas div="kartu">
<h4> Ross & Rach </h4>
<p> Taman Hunter Valley, Australia </p>
</div>
</div> - Isi src/app/home/home.component.css file dengan gaya untuk konten HTML.
.isi {
tinggi garis: 2rem;
ukuran huruf: 1.2em;
}.kartu {
bayangan kotak: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
lebar: 400px;
lapisan: 16px;
batas: 24px 0px;
warna latar belakang: asap putih;
font-family: Sans Serif;
} - Buat komponen lain menggunakan ng menghasilkan komponen perintah di terminal. Anda akan menggunakan komponen baru sebagai halaman tentang.
ng menghasilkan komponen tentang - Buka src/app/about/about.component.html file, dan ganti konten saat ini dengan konten baru.
<kelas div="isi">
<h2> Tentang saya </h2>
<p>
Saya'm John, dan saya suka memotret. Saya telah mengambil foto selama lebih dari 25 tahun. Kunjungi saya di media sosial saya:
</p>
<a href=""> Facebook </sebuah><br>
<a href=""> LinkedIn </sebuah><br>
<a href=""> Instagram </sebuah><br>
</div> - Isi src/app/about/about.component.css file dengan gaya untuk konten HTML.
.isi {
tinggi garis: 2rem;
ukuran huruf: 1.2em;
}
Cara Menavigasi Antara Dua Halaman
Anda dapat menggunakan perutean untuk menavigasi dari satu halaman ke halaman lain. Anda dapat mengonfigurasi ini dalam file perutean. Contoh ini akan memiliki satu file perutean untuk seluruh aplikasi, yang terletak di src/app/app-routing.module.ts.
- Jika aplikasi Anda belum memiliki file modul perutean aplikasi, Anda dapat membuatnya menggunakan ng menghasilkan modul memerintah. Di baris perintah atau terminal, navigasikan ke folder root aplikasi dan jalankan perintah berikut:
ng menghasilkan perutean aplikasi modul --aplikasi modul --flat - Ini akan membuat file app-routing.module.ts di. Anda src/aplikasi map.
- Di bagian atas file, tambahkan impor tambahan untuk komponen Beranda dan Tentang. Pastikan Anda juga mengimpor RouterModule dan CommonModule; pada akhirnya, pernyataan impor Anda akan terlihat seperti:
impor {Modul Umum} dari '@sudut/umum';
impor { Rute, RouterModule } dari '@sudut/router';
impor { Komponen Rumah } dari './home/home.component';
impor { Tentang Komponen } dari './tentang/tentang.komponen'; - Di bawah impor, tambahkan larik rute baru untuk menyimpan jalur yang akan Anda gunakan saat merutekan ke setiap halaman.
konstan rute: Rute = [
{ jalur: '', komponen: Komponen Rumah },
{ jalur: 'tentang', komponen: Tentang Komponen }
]; - Ganti blok NgModule dengan yang berikut ini, yang menambahkan RouterModule ke array impor dan ekspor.
@NgModule({
pernyataan: [],
impor: [
Modul Umum,
RouterModule.forRoot (rute)
],
ekspor: [RouterModule]
}) - Dalam src/app/app.component.html file, hapus konten saat ini, dan tambahkan tag outlet-router.
<kelas div="wadah">
<router-outlet></router-outlet>
</div>
Cara Menavigasi ke Halaman Baru dalam File HTML
Untuk menavigasi ke halaman dalam file HTML, gunakan tag jangkar. Di atribut href, tambahkan jalur yang Anda tentukan di larik rute.
- Dalam src/app/app.component.html file, tambahkan dua tag jangkar sebelum div wadah. Ini akan memungkinkan Anda untuk menavigasi antara halaman Beranda dan Tentang.
<kelas div="bilah navigasi">
<satu kelas ="tautan" href="">Rumah</sebuah>
<satu kelas ="tautan" href="/about">Tentang</sebuah>
</div> - Tambahkan beberapa gaya ke src/app/app.component.css mengajukan.
.wadah {
batas: 48px 35%;
font-family: &kutipan;Arial&kutipan;, Sans Serif;
menampilkan: melenturkan;
arah fleksibel: kolom;
menyelaraskan-item: tengah;
}.navbar {
warna latar belakang: darkslategray;
lapisan: 30px 50px;
menampilkan: melenturkan;
menyelaraskan-item: tengah;
font-family: Sans Serif;
}.tautan:tipe pertama {
margin-kanan: 32px;
}.tautan {
warna: putih;
dekorasi teks: tidak ada;
ukuran huruf: 14titik;
font-berat: berani;
} - Tambahkan beberapa gaya ke margin halaman keseluruhan di src/styles.css.
tubuh {
batas: 0;
lapisan: 0;
} - Di prompt perintah atau terminal, navigasikan ke folder root aplikasi Angular. Jalankan aplikasi menggunakan ng melayani perintah, dan tunggu sampai selesai dikompilasi.
ng melayani - Di browser, ketik localhostURL ke dalam bilah URL untuk melihat aplikasi Anda. Secara default, ini biasanya http://localhost: 4200/.
- Situs web Anda akan dimuat ke halaman Beranda.
- Anda dapat menavigasi ke halaman Tentang dengan mengklik tautan Tentang di bilah navigasi.
Cara Menavigasi ke Halaman Baru di File TypeScript
Sejauh ini, demo ini menggunakan tautan HTML standar untuk menyediakan navigasi. Untuk menavigasi menggunakan file TypeScript alih-alih file HTML, Anda dapat menggunakan router.navigasi().
- Dalam src/app/app.component.html file, hapus tag jangkar dan ganti dengan tag tombol. Tombol-tombol ini akan memiliki peristiwa klik yang memicu fungsi yang disebut clickButton(). Saat Anda memanggil fungsi clickButton(), tambahkan jalur rute URL sebagai argumen.
<kelas tombol ="tautan" (klik)="klikTombol('')">Rumah</button>
<kelas tombol ="tautan" (klik)="klikTombol('/about')">Tentang</button> - Tambahkan beberapa gaya ke tombol di src/app/app.component.css mengajukan.
tombol {
warna latar belakang: hitam;
lapisan: 4px 8px;
kursor: penunjuk;
} - Di bagian atas src/app/app.component.ts file, impor router.
impor { Perute } dari '@sudut/router'; - Tambahkan konstruktor baru di dalam kelas AppComponent, dan masukkan router ke dalam parameter.
konstruktor(router pribadi: Router) {
} - Di bawah konstruktor, buat fungsi baru bernama clickButton(), yang akan menavigasi ke halaman baru berdasarkan URL yang Anda masukkan.
clickButton (jalur: string) {
ini.router.navigate([jalur]);
} - Jalankan kembali perintah ng serve di command prompt atau terminal.
ng melayani - Arahkan ke situs web Anda di browser. href sekarang diganti dengan dua tombol.
- Klik pada Tentang tombol. Ini akan merutekan ke halaman Tentang.
Membuat Banyak Halaman dalam Aplikasi Sudut
Anda dapat merutekan antara beberapa halaman dalam aplikasi Angular dengan menggunakan perutean. Jika Anda memiliki komponen terpisah untuk setiap halaman, Anda dapat mengonfigurasi jalur untuk rute Anda dalam modul perutean.
Untuk menavigasi ke halaman lain melalui file HTML, gunakan tag anchor dengan atribut href sebagai jalur perutean ke halaman tersebut. Untuk menavigasi ke halaman lain melalui file TypeScript, Anda dapat menggunakan metode router.navigate().
Jika Anda sedang membangun aplikasi Angular, Anda dapat memanfaatkan arahan Angular. Ini memungkinkan Anda untuk menggunakan pernyataan if dinamis, for-loop, atau operasi logis lainnya dalam file HTML suatu komponen.
