Talep arttıkça, projenin işlevleri daha karmaşık hale gelir. Şu anda, projeyi modüler hale getirmeniz ve bileşenleri, talimatları ve boru hatlarını uyumlu fonksiyonel bloklara paketlemeniz gerekiyor; bu da Angular4'teki alt yolları ve modüllerin tembel yüklenmesini incelemek için tam uygun.
Önceki geliştirmede, kök modülde basit bir yönlendirme fonksiyonu uygulanmıştır ve bu fonksiyon aşağıdaki üç adımda özetlenebilir:
1、在app.module.ts文件中加载路由库，并且在@NgModule中引入RouterModule.forRoot方法，其中，appRoutes是路由数组，它定义了具体的路由规则。
2. Shell bileşenine bir navigasyon çubuğu ekleyin; routerLink komutu rotanın hedefini gösterir ve routerLinkActive seçilen etikete css stili ekler
3. Shell bileşeninin şablonuna bir router-outlet komutu ekleyin, görünüm orada görüntülenecektir
Şimdi bu temelde alt rotalar ve tembel modül yüklemeleri uygulamak istiyorum.
RouterModule.forRoot() ve RouterModule.forChild()
RouterModule nesnesi, yönlendirme bilgisini yapılandırmak için iki statik yöntem sunar: forRoot() ve forChild().
RouterModule.forRoot() yöntemi, ana modüldeki ana yönlendirme bilgisini tanımlamak için kullanılır ve RouterModule.forChild() yöntemi Router.forRoot() yöntemine benzer, ancak yalnızca özellik modüllerinde uygulanabilir.
Yani, kök modülde forRoot() kullanılırken, alt modülde forChild() kullanılır.
Oğlu Lu Ru
Diyelim ki /settings sayfamızın altında, /settings/profile ve /settings/password adlı iki sayfa var; bunlar sırasıyla profil sayfası ve şifre değişim sayfasını temsil ediyor. ayrı bir fonksiyon bloğu olarak ayarlanabilir ve bu bir özellik modülüne kapsüllenebilir. Kendi bağımsız güzergahları vardır ve profil ile şifre sayfalarının rotaları alt rotalar olarak ayarlanabilir.
SettingsModule modülünde forChild() yöntemini kullanıyoruz, çünkü SettingsModule uygulamamızın ana modülü değildir.
Bir diğer önemli fark ise, SettingsModule modülünün ana yolunu boş bir yol ('') olarak ayarlamamızdır. Çünkü yolu /settings olarak ayarlarsak, /settings/settings eşleşir. Boş bir yol belirterek, /settings yoluyla eşleşir.
Tembel yükleme: loadChildren
Ayar modülünün yönlendirme bilgilerini kök modül AppModule'de yapılandırın:
Burada tembel yüklemeli LoadChildren mülkü kullanılmaktadır. SettingsModule'ü AppModule'e aktarmak yerine, loadChildren özelliği Angular rotasına loadChildren özelliği tarafından yapılandırılmış yola göre SettingsModule modülünü yüklemesini söyler. Bu, modülün tembel yükleme fonksiyonunun özel uygulamasıdır; kullanıcı /settings/** yoluna eriştiğinde, ilgili SettingsModule modülü yüklenir ve bu da uygulama başladığında yüklenen kaynağın boyutunu azaltır.
yükÇocukların mülk değeri üç bölümden oluşur:
Modülleri içe aktarmak için göreceli yollar gereklidir
#分隔符
Modül sınıfının adını dışa aktarın
CommonModule modülü
CommonModule modülünü özellik modülüne eklemek istediğimi söyledim, ancak başta özellik modülünde eklemek istediğimi fark etmemiştim ve sonuç olarak sayfa hatası yönlendirme sırasında bildirildi:
core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Template parse errors:
'ngClass'a bağlanamıyorum çünkü 'div'in bilinen bir özelliği değil.
'ngForOf'a bağlanamıyor çünkü 'p'nin bilinen bir özelliği değil.
Property binding ngForOf gömülü şablonda herhangi bir direktif tarafından kullanılmaz. Mülk adının doğru yazıldığından ve tüm direktiflerin "@NgModule.declarations" bölümünde listelendiğinden emin olun.
'ngIf' ile bağlanamıyor çünkü 'div'in bilinen bir özelliği değil.
......
Uzun süre kontrol ettikten sonra, bunun CommonModule'u özellik modülünde eklemememden kaynaklandığını ve tanıttıktan sonra bu hataların kaybolduğunu fark ettim.
CommonModule, NgIf ve NgFor dahil olmak üzere uygulamalarda yaygın kullanılan birçok komut sağlar. Daha doğrusu, NgIf gibi direktifler @angular/common'dan CommonModule'de ilan edilir.
BrowserModule modülünü kök modül AppModule'e aktardık, AppModule ise CommonModule'u içe aktardı ve yeniden dışa aktardı. Sonuç olarak, BrowserModule'u içe aktardığınız sürece CommonModule'deki talimatları otomatik olarak alacaksınız.
Bir BrowserModule içe aktarmak, modül tarafından ortaya çıkan tüm bileşenler, direktifler ve boru hatları doğrudan AppModule altındaki herhangi bir bileşen şablonunda ek zahmetli adımlar olmadan erişilebilir hale getirir. Ama BrowserModule'u başka bir modüle aktarmayın. Özellik modülleri ve tembel yükleme modülleri bunun yerine CommonModule'e aktarılmalıdır. Tam uygulama seviyesindeki sağlayıcının yeniden başlatılmasını gerektirmezler. Bir BrowserModule'u tembel bir yükleme modülüne aktarırsanız, Angular hata atar.
Son iki günde Angular alt rotalar ve tembel yükleme ile karşılaştığım bazı sorunlar ve özetler bunlar.
|
Yayınlandı 13.06.2019 13:13:10
|
|
|
|
