Καθώς η ζήτηση αυξάνεται, οι λειτουργίες του έργου γίνονται πιο περίπλοκες. Αυτή τη στιγμή, πρέπει να διαμορφώσετε τα στοιχεία του έργου και του πακέτου, τις οδηγίες και τους αγωγούς σε συνεκτικά λειτουργικά μπλοκ, κάτι που είναι σωστό για να εξερευνήσετε δευτερεύουσες διαδρομές και την αργή φόρτωση μονάδων στο Angular4.
Στην προηγούμενη ανάπτυξη, έχει εφαρμοστεί μια απλή λειτουργία δρομολόγησης στη μονάδα ρίζας, η οποία μπορεί να συνοψιστεί στα ακόλουθα τρία βήματα:
1、在app.module.ts文件中加载路由库，并且在@NgModule中引入RouterModule.forRoot方法，其中，appRoutes是路由数组，它定义了具体的路由规则。
2. Προσθέστε μια γραμμή πλοήγησης στο στοιχείο κελύφους, όπου η εντολή routerLink δείχνει στον προορισμό της διαδρομής και το routerLinkActive προσθέτει στυλ css στην επιλεγμένη ετικέτα
3. Προσθέστε μια εντολή εξόδου δρομολογητή στο πρότυπο του στοιχείου κελύφους και η προβολή θα εμφανιστεί εκεί
Τώρα θέλω να εφαρμόσω δευτερεύουσες διαδρομές και αργή φόρτωση μονάδων σε αυτή τη βάση.
RouterModule.forRoot() και RouterModule.forChild()
Το αντικείμενο RouterModule παρέχει δύο στατικές μεθόδους: forRoot() και forChild() για τη διαμόρφωση των πληροφοριών δρομολόγησης.
Η μέθοδος RouterModule.forRoot() χρησιμοποιείται για τον καθορισμό των κύριων πληροφοριών δρομολόγησης στην κύρια μονάδα και η RouterModule.forChild() είναι παρόμοια με τη μέθοδο Router.forRoot(), αλλά μπορεί να εφαρμοστεί μόνο σε λειτουργικές μονάδες χαρακτηριστικών.
Δηλαδή, η forRoot() χρησιμοποιείται στη ριζική μονάδα και η forChild() στην υποενότητα.
Ο γιος του Λου Ρου
Ας υποθέσουμε ότι υπάρχουν δύο σελίδες κάτω από τη σελίδα ρυθμίσεων /settings, /settings/profile και /settings/password, οι οποίες αντιπροσωπεύουν τη σελίδα προφίλ και τη σελίδα αλλαγής κωδικού πρόσβασης αντίστοιχα. ως ξεχωριστό μπλοκ λειτουργιών, το οποίο μπορεί να ενσωματωθεί σε μια λειτουργική μονάδα. Έχει τις δικές του ανεξάρτητες διαδρομές και οι διαδρομές για τις σελίδες προφίλ και κωδικού πρόσβασης μπορούν να οριστούν ως δευτερεύουσες διαδρομές.
Στην ενότητα SettingsModule χρησιμοποιούμε τη μέθοδο forChild(), επειδή η SettingsModule δεν είναι η κύρια ενότητα της εφαρμογής μας.
Μια άλλη σημαντική διαφορά είναι ότι ορίσαμε την κύρια διαδρομή της μονάδας SettingsModule σε μια κενή διαδρομή (''). Γιατί αν ορίσουμε τη διαδρομή στο /settings, θα ταιριάζει με το /settings/settings. Καθορίζοντας μια κενή διαδρομή, ταιριάζει με τη διαδρομή /settings.
Lazy loading: loadChildren
Διαμορφώστε τις πληροφορίες δρομολόγησης της λειτουργικής μονάδας ρύθμισης στη ριζική λειτουργική μονάδα AppModule:
Η ιδιότητα LoadChildren που φορτώνει τεμπέλης χρησιμοποιείται εδώ. Αντί να εισαγάγετε το SettingsModule στο AppModule, η ιδιότητα loadChildren λέει στη γωνιακή διαδρομή να φορτώσει τη λειτουργική μονάδα SettingsModule σύμφωνα με τη διαδρομή που έχει διαμορφωθεί από την ιδιότητα loadChildren. Αυτή είναι η συγκεκριμένη εφαρμογή της λειτουργίας τεμπέλης φόρτωσης της μονάδας, όταν ο χρήστης αποκτήσει πρόσβαση στη διαδρομή /settings/**, θα φορτωθεί η αντίστοιχη μονάδα SettingsModule, η οποία μειώνει το μέγεθος του φορτωμένου πόρου κατά την εκκίνηση της εφαρμογής.
φορτώνωΗ αξία της ιδιοκτησίας των παιδιών αποτελείται από τρία μέρη:
Απαιτούνται σχετικές διαδρομές για την εισαγωγή λειτουργικών μονάδων
#分隔符
Εξαγωγή του ονόματος της κλάσης module
Ενότητα CommonModule
Ανέφερα ότι ήθελα να εισαγάγω τη λειτουργική μονάδα CommonModule στη λειτουργική μονάδα χαρακτηριστικών, αλλά δεν παρατήρησα ότι ήθελα να την εισαγάγω στη λειτουργική μονάδα χαρακτηριστικών στην αρχή, και ως αποτέλεσμα, το σφάλμα σελίδας αναφέρθηκε κατά τη δρομολόγηση:
core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Δεν είναι δυνατή η σύνδεση με το 'ngClass' αφού δεν είναι γνωστή ιδιότητα του 'div'.
Δεν είναι δυνατή η σύνδεση με το 'ngForOf' αφού δεν είναι γνωστή ιδιότητα του 'p'.
Δέσμευση ιδιοτήτων ngForOf δεν χρησιμοποιείται από καμία οδηγία σε ενσωματωμένο πρότυπο. Βεβαιωθείτε ότι το όνομα του ακινήτου είναι γραμμένο σωστά και ότι όλες οι οδηγίες αναφέρονται στο "@NgModule.declarations".
Δεν είναι δυνατή η σύνδεση με το 'ngIf' αφού δεν είναι γνωστή ιδιότητα του 'div'.
......
Αφού έλεγξα για μεγάλο χρονικό διάστημα, διαπίστωσα ότι ήταν επειδή δεν εισήγαγα το CommonModule στη λειτουργική μονάδα χαρακτηριστικών και μετά την εισαγωγή του, αυτά τα σφάλματα εξαφανίστηκαν.
Το CommonModule παρέχει πολλές οδηγίες που χρησιμοποιούνται συνήθως σε εφαρμογές, συμπεριλαμβανομένων των NgIf και NgFor. Πιο συγκεκριμένα, οδηγίες όπως το NgIf δηλώνονται στο CommonModule από το @angular/common.
Εισαγάγαμε τη λειτουργική μονάδα BrowserModule στη ριζική λειτουργική μονάδα AppModule, η οποία εισήγαγε το CommonModule και το εξήγαγε ξανά. Το τελικό αποτέλεσμα είναι ότι όσο εισάγετε το BrowserModule, θα λαμβάνετε αυτόματα τις οδηγίες στο CommonModule.
Η εισαγωγή ενός BrowserModule καθιστά όλα τα στοιχεία, τις οδηγίες και τους αγωγούς που εκτίθενται από το module διαθέσιμα απευθείας σε οποιοδήποτε πρότυπο στοιχείου κάτω από το AppModule χωρίς πρόσθετα κουραστικά βήματα. Αλλά μην εισάγετε το BrowserModule σε καμία άλλη ενότητα. Οι λειτουργικές μονάδες χαρακτηριστικών και οι λειτουργικές μονάδες αργής φόρτωσης θα πρέπει να εισαχθούν στο CommonModule. Δεν απαιτούν επανεκκίνηση του πλήρους παρόχου σε επίπεδο εφαρμογής. Εάν εισαγάγετε ένα BrowserModule σε μια τεμπέλικη μονάδα φόρτωσης, το Angular εμφανίζει ένα σφάλμα.
Αυτά είναι μερικά από τα προβλήματα και τις περιλήψεις που αντιμετώπισα τις τελευταίες δύο ημέρες χρησιμοποιώντας γωνιακές υποδιαδρομές και αργή φόρτωση.
|
Δημοσιεύτηκε στις 13/6/2019 1:13:10 μ.μ.
|
|
|
|
