Penyelesai dan Data Laluan
Pramuat data sebelum mengaktifkan laluan.
Penyelesai dan Data Laluan ialah pelajaran Angular Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Angular Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.
Apakah penyelesai
Penyelesai mengambil data terlebih dahulu sebelum laluan diaktifkan, supaya komponen dipaparkan dengan data yang sudah tersedia — tiada paparan pemuatan dalam komponen itu sendiri.
Data laluan statik
Sifat data melampirkan nilai statik pada laluan, yang boleh dibaca melalui ActivatedRoute.data.
export const routes = [
{ path: 'admin', component: AdminComponent,
data: { title: 'Admin Panel', roles: ['admin'] } }
];Membaca data laluan
route.data ialah aliran boleh diperhati bagi objek data yang digabungkan.
route.data.subscribe(d => {
console.log(d['title']); // Admin Panel
});Penyelesai berfungsi: ResolveFn
Angular moden menggunakan ResolveFn — fungsi biasa yang mengembalikan data (atau observable/promise bagi data tersebut).
import { ResolveFn } from '@angular/router';
import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
export const userResolver = (route) => {
const http = inject(HttpClient);
return http.get('/api/user/' + route.paramMap.get('id'));
};Menyambungkan penyelesai kepada laluan
Pasangkan penyelesai di bawah kunci resolve. Hasilnya diletakkan dalam route.data di bawah kunci tersebut.
export const routes = [
{ path: 'user/:id', component: UserComponent,
resolve: { user: userResolver } }
];Menggunakan data yang diselesaikan
Baca nilai yang diselesaikan daripada route.data menggunakan kuncinya.
route.data.subscribe(d => {
this.user = d['user']; // already loaded
});Data yang diselesaikan melalui pengikatan input
Dengan withComponentInputBinding(), kunci yang diselesaikan diikat kepada input komponen yang sepadan secara automatik.
export class UserComponent {
@Input() user!: User; // from resolve: { user: ... }
}Penyelesai dan masa navigasi
Penghala menunggu aliran boleh diperhati penyelesai lengkap (atau promise selesai) sebelum mengaktifkan laluan. Penyelesai yang tidak pernah lengkap akan menyekat navigasi.
Mengendalikan ralat penyelesai
Jika penyelesai mengalami ralat, navigasi dibatalkan. Tangkap ralat di dalam penyelesai untuk mengubah hala atau mengembalikan pilihan gantian.
export const userResolver = (route) => {
const http = inject(HttpClient);
const router = inject(Router);
return http.get('/api/user/' + route.paramMap.get('id')).pipe(
catchError(() => { router.navigate(['/404']); return EMPTY; })
);
};Masa menggunakan penyelesai
Gunakan penyelesai untuk data yang mesti tersedia sebelum halaman dipaparkan. Untuk data yang boleh dimuatkan secara berperingkat, mendapatkan data dalam komponen (dengan keadaan pemuatan) selalunya memberikan pengalaman pengguna yang lebih baik. Jangan sekat navigasi kerana data pilihan yang lambat.
Strategi tajuk
Penghala mempunyai sifat laluan terbina dalam title dan TitleStrategy untuk menetapkan tajuk dokumen, yang sering digandingkan dengan data yang diselesaikan.
export const routes = [
{ path: 'about', component: AboutComponent, title: 'About Us' }
];Semakan Pantas
Uji pemahaman anda tentang penyelesai.
Imbas Kembali: Penyelesai & Data Laluan
Penyelesai memuatkan data terlebih dahulu sebelum pengaktifan.
data: nilai laluan statik.ResolveFn+resolve: pra-pengambilan dinamik ke dalamroute.data.- Penghala menunggu sehingga lengkap; kendalikan ralat untuk mengelakkan navigasi tersekat.
Seterusnya: pengawal laluan berfungsi.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 38
- Pelajaran
- 144
Soalan Lazim
Adakah pelajaran “Penyelesai dan Data Laluan” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Angular Academy, termasuk “Penyelesai dan Data Laluan”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Penyelesai dan Data Laluan”?
Pramuat data sebelum mengaktifkan laluan. Anda berlatih Angular Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Angular Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Angular Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.
Berapa lamakah pelajaran “Penyelesai dan Data Laluan” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Angular Academy ini?
Ya. Setiap pelajaran Angular Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Parameter Laluan dan Parameter Pertanyaan
- Penyelesai dan Data Laluan
- Pengawal Laluan Fungsian
- Peristiwa Penghala dan Navigasi