Γωνιακή δρομολόγηση που εξηγείται, πώς να περιηγηθείτε στη διαδρομή URL που βασίζεται στη συνιστώσα

Στο προηγούμενο άρθρο μου, εξήγησα τα βήματα για τη δημιουργία βασικής γωνιακής εφαρμογής με έκδοση Angular 2+.

Εδώ θα εξηγήσω το επόμενο βήμα, πώς να γράψω Δρομολόγηση για να πλοηγηθείτε σε διαφορετικές συνιστώσες με βάση τη διαδρομή URL. Λαμβάνοντας υπόψη ότι ξέρετε τι είναι το στοιχείο και η ενότητα. Εάν έχετε οποιαδήποτε αμφιβολία σχετικά με το στοιχείο και το στοιχείο σχολίων εδώ.

Ακολουθούν τα βήματα για την υλοποίηση της δρομολόγησης:

Βήμα 1:

Εκτελέστε την εντολή below για να δημιουργήσετε το AppRoutingModule

ng g ενότητα App - routing

Δημιουργεί κάτω από το αρχείο app-routing.module.ts με το παρακάτω περιεχόμενο.

εισαγωγή {NgModule} από '@ γωνιακό / πυρήνα'.
εισαγωγή {Routes, RouterModule} από το '@ γωνιακό / δρομολογητή'.
@NgModule ({εισαγωγές: [RouterModule.forChild (διαδρομές)], εξαγωγές: [RouterModule]})
κλάση εξαγωγής AppRoutingModule {}

Βήμα 2:

Επεξεργαστείτε το παραπάνω αρχείο με τις διαδρομές:

const: Διαδρομές = [{διαδρομή: 'σπίτι', στοιχείο: HomeComponent}]

Εδώ έχω δημιουργήσει μια σταθερά τύπου Routes και έχει αντιστοιχιστεί αντίστοιχη διαδρομή και συνιστώσα. Όπως μπορείτε να συσχετίσετε πολλαπλές διαδρομές με το αντίστοιχο στοιχείο. Μετά την επεξεργασία του αρχείου θα φαίνεται όπως παρακάτω:

εισαγωγή {NgModule} από '@ γωνιακό / πυρήνα'.
εισαγωγή {Routes, RouterModule} από το '@ γωνιακό / δρομολογητή'.
διαδρομές const: Διαδρομές = [{διαδρομή: 'σπίτι', συστατικό: HomeComponent}, {path: 'login', στοιχείο: LoginComponent}]
@NgModule ({εισαγωγές: [RouterModule.forChild (διαδρομές)], εξαγωγές: [RouterModule]})
κλάση εξαγωγής AppRoutingModule {}

Τώρα μπορείτε να εισαγάγετε αυτό το AppRoutingModule στο αρχείο Module App όπως παρακάτω:

εισαγωγές: [
AppRoutingModule,
]

Τώρα μπορείτε να με ρωτήσετε πώς να ορίσετε την προεπιλεγμένη δρομολόγηση. Εδώ πρέπει να ορίσετε τη διαδρομή όπως παρακάτω για να δημιουργήσετε την προεπιλεγμένη διαδρομή:

{διαδρομή: '', redirectTo: '/ home', pathMatch: 'πλήρης'}

Προσθέστε αυτό το εσωτερικό δρομολόγια όπως παρακάτω:

const: Διαδρομές = [
{διαδρομή: 'σπίτι', στοιχείο: HomeComponent},
{διαδρομή: '', redirectTo: '/ home', pathMatch: 'full'},
{path: 'login', συστατικό: LoginComponent}
]

Μπορείτε να ορίσετε τη διαδρομή για μη έγκυρα URls χρησιμοποιώντας παρακάτω:

{διαδρομή: '**', redirectTo: '/ errorPage', pathMatch: 'πλήρης'}

Αυτό το άρθρο συνεχίζει στο επόμενο άρθρο μου, εκεί θα εξηγήσω πώς να δημιουργήσετε τη διαδρομή παιδιών, πώς να δημιουργήσετε τεμπέληση φόρτωσης και πολλά άλλα.