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

Στη συνέχεια, μπορείτε να δρομολογήσετε σε άλλες σελίδες μέσα σε ένα αρχείο HTML χρησιμοποιώντας μια ετικέτα αγκύρωσης. Μπορείτε επίσης να δρομολογήσετε σε άλλες σελίδες μέσα σε ένα αρχείο TypeScript, χρησιμοποιώντας τη μέθοδο router.navigate().

Πώς να δημιουργήσετε μια νέα σελίδα σε μια γωνιακή εφαρμογή

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

  1. Δημιουργήστε ένα νέο στοιχείο στην εφαρμογή Angular χρησιμοποιώντας το ng παράγουν συστατικό εντολή:
    ng δημιουργία στοιχείου σπιτιού
  2. Ανοιξε το src/app/home/home.component.html
    instagram viewer
    αρχείο και αντικαταστήστε το τρέχον περιεχόμενο με νέο περιεχόμενο.
    <div class="περιεχόμενο">
    <h2> Σπίτι </h2>
    <Π>
     Είμαι φωτογράφος που κάνει φωτογράφιση γάμου. Δείτε τα έργα μου!
    </Π>
    <div class="κάρτα">
    <h4> Γιάννης & Έιμι </h4>
    <Π> Blue Mountains, Αυστραλία </Π>
    </div>
    <div class="κάρτα">
    <h4> Ρος & Ραχ </h4>
    <Π> Hunter Valley Gardens, Αυστραλία </Π>
    </div>
    </div>
  3. Συμπληρώστε το src/app/home/home.component.css αρχείο με στυλ για το περιεχόμενο HTML.
    .περιεχόμενο {
    ύψος γραμμής: 2rem;
    μέγεθος γραμματοσειράς: 1.2em;
    }
    .κάρτα {
    κουτί-σκιά: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    πλάτος: 400px;
    υλικό παραγεμίσματος: 16px;
    περιθώριο: 24px 0px;
    χρώμα του φόντου: λευκός καπνός;
    γραμματοσειρά-οικογένεια: Σανς σέριφ;
    }
  4. Δημιουργήστε ένα άλλο στοιχείο χρησιμοποιώντας το ng παράγουν συστατικό εντολή στο τερματικό. Θα χρησιμοποιήσετε το νέο στοιχείο ως σελίδα για.
    παράγουν συστατικό σχετικά
  5. Ανοιξε το src/app/about/about.component.html αρχείο και αντικαταστήστε το τρέχον περιεχόμενο με νέο περιεχόμενο.
    <div class="περιεχόμενο">
    <h2> Σχετικά με μένα </h2>
    <Π>
     Εγώ'm John, και μου αρέσει να βγάζω φωτογραφίες. Τραβάω φωτογραφίες για πάνω από 25 χρόνια. Επισκεφτείτε με στα social media μου:
    </Π>
    <a href=""> Facebook </ένα><br>
    <a href=""> LinkedIn </ένα><br>
    <a href=""> Ίνσταγκραμ </ένα><br>
    </div>
  6. Συμπληρώστε το src/app/about/about.component.css αρχείο με στυλ για το περιεχόμενο HTML.
    .περιεχόμενο {
    ύψος γραμμής: 2rem;
    μέγεθος γραμματοσειράς: 1.2em;
    }

Πώς να πλοηγηθείτε μεταξύ των δύο σελίδων

Μπορείτε να χρησιμοποιήσετε τη δρομολόγηση για να πλοηγηθείτε από τη μια σελίδα στην άλλη. Μπορείτε να το ρυθμίσετε σε ένα αρχείο δρομολόγησης. Αυτό το παράδειγμα θα έχει ένα αρχείο δρομολόγησης για ολόκληρη την εφαρμογή, που βρίσκεται σε src/app/app-routing.module.ts.

  1. Εάν η εφαρμογή σας δεν διαθέτει ήδη το αρχείο λειτουργικής μονάδας δρομολόγησης εφαρμογής, μπορείτε να δημιουργήσετε ένα χρησιμοποιώντας το ng δημιουργία ενότητας εντολή. Σε μια γραμμή εντολών ή ένα τερματικό, μεταβείτε στον ριζικό φάκελο της εφαρμογής και εκτελέστε την ακόλουθη εντολή:
    ng δημιουργία μονάδας app-routing --module app --flat
  2. Αυτό θα δημιουργήσει ένα αρχείο app-routing.module.ts στο δικό σας src/app ντοσιέ.
  3. Στο επάνω μέρος του αρχείου, προσθέστε πρόσθετες εισαγωγές για τα στοιχεία Home και About. Βεβαιωθείτε ότι εισάγετε επίσης RouterModule και CommonModule. τελικά, οι δηλώσεις εισαγωγής σας θα πρέπει να έχουν την εξής μορφή:
    εισαγωγή { CommonModule } από '@angular/common';
    εισαγωγή { Routes, RouterModule } από '@angular/router';
    εισαγωγή { HomeComponent } από './home/home.component';
    εισαγωγή { AboutComponent } από './about/about.component';
  4. Κάτω από τις εισαγωγές, προσθέστε έναν νέο πίνακα διαδρομών για να αποθηκεύσετε τις διαδρομές που θα χρησιμοποιήσετε κατά τη δρομολόγηση σε κάθε σελίδα.
    συνθ διαδρομές: Διαδρομές = [
     { μονοπάτι: '', συστατικό: HomeComponent },
     { μονοπάτι: 'σχετικά με', συστατικό: AboutComponent }
    ];
  5. Αντικαταστήστε το μπλοκ NgModule με το ακόλουθο, το οποίο προσθέτει το RouterModule στον πίνακα εισαγωγών και εξαγωγών.
    @NgModule({
     δηλώσεις: [],
     εισαγωγές: [
     CommonModule,
     RouterModule.forRoot (διαδρομές)
     ],
     εξαγωγές: [RouterModule]
    })
  6. Στο src/app/app.component.html αρχείο, αφαιρέστε το τρέχον περιεχόμενο και προσθέστε την ετικέτα router-outlet.
    <div class="δοχείο">
    <δρομολογητής-πρίζα></router-outlet>
    </div>

Πώς να πλοηγηθείτε στη Νέα σελίδα σε ένα αρχείο HTML

Για να πλοηγηθείτε σε μια σελίδα μέσα σε ένα αρχείο HTML, χρησιμοποιήστε την ετικέτα αγκύρωσης. Στο χαρακτηριστικό href, προσθέστε τη διαδρομή που καθορίσατε στον πίνακα διαδρομών.

  1. Στο src/app/app.component.html αρχείο, προσθέστε δύο ετικέτες αγκύρωσης πριν από το κοντέινερ div. Αυτό θα σας επιτρέψει να πλοηγηθείτε μεταξύ των σελίδων Home και About.
    <div class="Navbar">
    <μια τάξη="Σύνδεσμος" href="">Σπίτι</ένα>
    <μια τάξη="Σύνδεσμος" href="/about">Σχετικά με</ένα>
    </div>
  2. Προσθέστε λίγο στυλ στο src/app/app.component.css αρχείο.
    .δοχείο {
    περιθώριο: 48px 35%;
    γραμματοσειρά-οικογένεια: &quot;Arial&quot;, Σανς σέριφ;
    απεικόνιση: καλώδιο;
    flex-direction: στήλη;
    στοίχιση-στοιχεία: κέντρο;
    }
    .navbar {
    χρώμα του φόντου: σκούρο γκρι;
    υλικό παραγεμίσματος: 30px 50px;
    απεικόνιση: καλώδιο;
    στοίχιση-στοιχεία: κέντρο;
    γραμματοσειρά-οικογένεια: Σανς σέριφ;
    }
    

    .Σύνδεσμος:πρώτου τύπου {
    περιθώριο-δεξιά: 32px;
    }
    .Σύνδεσμος {
    χρώμα: άσπρο;
    κείμενο-διακόσμηση: κανένας;
    μέγεθος γραμματοσειράς: 14pt;
    βάρος γραμματοσειράς: τολμηρός;
    }
  3. Προσθέστε λίγο στυλ στο συνολικό περιθώριο της σελίδας src/styles.css.
    σώμα {
    περιθώριο: 0;
    υλικό παραγεμίσματος: 0;
    }
  4. Σε μια γραμμή εντολών ή ένα τερματικό, μεταβείτε στον ριζικό φάκελο της εφαρμογής Angular. Εκτελέστε την εφαρμογή χρησιμοποιώντας το ng σερβίρετε εντολή και περιμένετε να ολοκληρωθεί η μεταγλώττιση.
    ng σερβίρετε
  5. Σε ένα πρόγραμμα περιήγησης, πληκτρολογήστε το localhostURL στη γραμμή URL για να προβάλετε την εφαρμογή σας. Από προεπιλογή, αυτό είναι συνήθως http://localhost: 4200/.
  6. Ο ιστότοπός σας θα φορτωθεί στην αρχική σελίδα.
  7. Μπορείτε να μεταβείτε στη σελίδα Πληροφορίες κάνοντας κλικ στο σύνδεσμο Πληροφορίες στη γραμμή πλοήγησης.

Πώς να πλοηγηθείτε στη Νέα σελίδα σε ένα αρχείο TypeScript

Μέχρι στιγμής, αυτή η επίδειξη χρησιμοποιεί τυπικούς συνδέσμους HTML για την παροχή πλοήγησης. Για πλοήγηση χρησιμοποιώντας το αρχείο TypeScript αντί για το αρχείο HTML, μπορείτε να χρησιμοποιήσετε router.navigate().

  1. Στο src/app/app.component.html αρχείο, αφαιρέστε τις ετικέτες αγκύρωσης και αντικαταστήστε τις με ετικέτες κουμπιών. Αυτά τα κουμπιά θα έχουν ένα συμβάν κλικ που ενεργοποιεί μια συνάρτηση που ονομάζεται clickButton(). Όταν καλείτε τη συνάρτηση clickButton(), προσθέστε τη διαδρομή διαδρομής URL ως όρισμα.
    <κλάση κουμπιού="Σύνδεσμος" (κλικ)="κουμπί κλικ('')">Σπίτι</button>
    <κλάση κουμπιού="Σύνδεσμος" (κλικ)="κουμπί κλικ('/about')">Σχετικά με</button>
  2. Προσθέστε λίγο στυλ στα κουμπιά στο src/app/app.component.css αρχείο.
    κουμπί {
    χρώμα του φόντου: μαύρος;
    υλικό παραγεμίσματος: 4px 8px;
    δρομέας: δείκτης;
    }
  3. Στην κορυφή του src/app/app.component.ts αρχείο, εισάγετε το δρομολογητή.
    εισαγωγή { Router } από '@angular/router';
  4. Προσθέστε έναν νέο κατασκευαστή μέσα στην κλάση AppComponent και εισάγετε τον δρομολογητή εντός των παραμέτρων.
    κατασκευαστής(ιδιωτικός δρομολογητής: δρομολογητής) {
    }
  5. Κάτω από τον κατασκευαστή, δημιουργήστε μια νέα συνάρτηση που ονομάζεται clickButton(), η οποία θα μεταβεί στη νέα σελίδα με βάση τη διεύθυνση URL που μεταβιβάζετε.
    clickButton (διαδρομή: συμβολοσειρά) {
    Αυτό.router.navigate([path]);
    }
    ​​​​​​
  6. Εκτελέστε ξανά την εντολή ng serve στη γραμμή εντολών ή στο τερματικό.
    ng σερβίρετε
  7. Πλοηγηθείτε στον ιστότοπό σας σε ένα πρόγραμμα περιήγησης. Το href έχει πλέον αντικατασταθεί με δύο κουμπιά.
  8. Κάνε κλικ στο Σχετικά με κουμπί. Θα δρομολογηθεί στη σελίδα Πληροφορίες.

Δημιουργία πολλαπλών σελίδων σε μια γωνιακή εφαρμογή

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

Για να πλοηγηθείτε σε άλλη σελίδα μέσω ενός αρχείου HTML, χρησιμοποιήστε μια ετικέτα αγκύρωσης με το χαρακτηριστικό href ως διαδρομή δρομολόγησης σε αυτήν τη σελίδα. Για να μεταβείτε σε άλλη σελίδα μέσω ενός αρχείου TypeScript, μπορείτε να χρησιμοποιήσετε τη μέθοδο router.navigate().

Εάν δημιουργείτε μια εφαρμογή Angular, μπορείτε να χρησιμοποιήσετε τις οδηγίες Angular. Αυτά σας επιτρέπουν να χρησιμοποιείτε δυναμικές δηλώσεις if, βρόχους for ή άλλες λογικές λειτουργίες μέσα στο αρχείο HTML ενός στοιχείου.