Seiring dengan meningkatnya permintaan, fungsi proyek menjadi lebih kompleks. Saat ini, Anda perlu memodularisasi proyek dan mengemas komponen, instruksi, dan alur menjadi blok fungsional yang kohesif, yang tepat untuk menjelajahi subrute dan pemuatan lambat modul di Angular4.
Dalam pengembangan sebelumnya, fungsi perutean sederhana telah diimplementasikan dalam modul root, yang dapat diringkas dalam tiga langkah berikut:
1、在app.module.ts文件中加载路由库，并且在@NgModule中引入RouterModule.forRoot方法，其中，appRoutes是路由数组，它定义了具体的路由规则。
2. Tambahkan bilah navigasi ke komponen shell, di mana perintah routerLink menunjuk ke tujuan rute, dan routerLinkActive menambahkan gaya css ke label yang dipilih
3. Tambahkan perintah router-outlet ke templat komponen shell, dan tampilan akan ditampilkan di sana
Sekarang saya ingin mengimplementasikan subrute dan pemuatan modul lambat atas dasar ini.
RouterModule.forRoot() dan RouterModule.forChild()
Objek RouterModule menyediakan dua metode statis: forRoot() dan forChild() untuk mengonfigurasi informasi perutean.
Metode RouterModule.forRoot() digunakan untuk menentukan informasi perutean utama dalam modul utama, dan RouterModule.forChild() mirip dengan metode Router.forRoot(), tetapi hanya dapat diterapkan dalam modul fitur.
Artinya, forRoot() digunakan dalam modul root dan forChild() digunakan dalam submodul.
Putranya Lu Ru
Misalkan ada dua halaman di bawah halaman pengaturan /settings kami, /settings/profile dan /settings/password, yang masing-masing mewakili halaman profil dan halaman perubahan kata sandi. pengaturan sebagai blok fungsi terpisah, yang dapat dienkapsulasi ke dalam modul fitur. Ini memiliki rute independennya sendiri, dan rute untuk halaman profil dan kata sandi dapat diatur sebagai subrute.
Dalam modul SettingsModule kita menggunakan metode forChild(), karena SettingsModule bukanlah modul utama aplikasi kita.
Perbedaan utama lainnya adalah bahwa kita mengatur jalur utama modul SettingsModule ke jalur kosong (''). Karena jika kita mengatur jalur ke /settings, itu akan cocok dengan /settings/settings. Dengan menentukan jalur kosong, jalur tersebut cocok dengan jalur /settings.
Pemuatan malas: bebanAnak
Konfigurasikan informasi perutean modul pengaturan di modul root AppModule:
Properti LoadChildren yang memuat lambat digunakan di sini. Alih-alih mengimpor SettingsModule ke AppModule, properti loadChildren memberi tahu rute Angular untuk memuat modul SettingsModule sesuai dengan jalur yang dikonfigurasi oleh properti loadChildren. Ini adalah aplikasi khusus dari fungsi pemuatan lambat modul, ketika pengguna mengakses jalur /settings/**, modul SettingsModule yang sesuai akan dimuat, yang mengurangi ukuran sumber daya yang dimuat saat aplikasi dimulai.
loadChildren's property value terdiri dari tiga bagian:
Jalur relatif untuk mengimpor modul diperlukan
#分隔符
Mengekspor nama kelas modul
modul CommonModule
Saya menyebutkan bahwa saya ingin memperkenalkan modul CommonModule di modul fitur, tetapi saya tidak menyadari bahwa saya ingin memperkenalkannya di modul fitur pada awalnya, dan akibatnya, kesalahan halaman dilaporkan selama perutean:
core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Tidak dapat mengikat ke 'ngClass' karena itu bukan properti 'div' yang diketahui.
Tidak dapat mengikat ke 'ngForOf' karena itu bukan properti 'p' yang diketahui.
Pengikatan properti ngForOf tidak digunakan oleh arahan apa pun pada templat yang disematkan. Pastikan nama properti dieja dengan benar dan semua arahan tercantum dalam "@NgModule.declarations".
Tidak dapat mengikat ke 'ngIf' karena itu bukan properti 'div' yang diketahui.
......
Setelah memeriksa untuk waktu yang lama, saya menemukan bahwa itu karena saya tidak memperkenalkan CommonModule di modul fitur, dan setelah memperkenalkannya, kesalahan ini menghilang.
CommonModule menyediakan banyak instruksi yang umum digunakan dalam aplikasi, termasuk NgIf dan NgFor. Lebih tepatnya, direktif seperti NgIf dideklarasikan di CommonModule dari @angular/common.
Kami mengimpor modul BrowserModule di modul root AppModule, yang mengimpor CommonModule dan mengekspornya kembali. Hasil akhirnya adalah selama Anda mengimpor BrowserModule, Anda akan secara otomatis mendapatkan instruksi di CommonModule.
Mengimpor BrowserModule membuat semua komponen, direktif, dan alur yang diekspos oleh modul tersedia langsung di templat komponen apa pun di bawah AppModule tanpa langkah tambahan yang membosankan. Tetapi jangan mengimpor BrowserModule ke modul lain. Modul fitur dan modul pemuatan lambat harus diimpor ke CommonModule sebagai gantinya. Mereka tidak memerlukan inisialisasi ulang penyedia tingkat aplikasi penuh. Jika Anda mengimpor BrowserModule dalam modul pemuatan lambat, Angular akan melemparkan kesalahan.
Ini adalah beberapa masalah dan ringkasan yang saya temui dalam dua hari terakhir menggunakan subrute Angular dan pemuatan lambat.
|
Diposting pada 13/06/2019 13.13.10
|
|
|
|
