Wenn Sie eine Angular-Anwendung mit mehreren Seiten erstellen, müssen Sie Routing verwenden, um zwischen ihnen zu navigieren. Sie können dies tun, indem Sie eine Liste von Routen mit einem Pfad für jede Seite im Routing-Modul erstellen.
Sie können dann zu anderen Seiten innerhalb einer HTML-Datei leiten, indem Sie ein Anker-Tag verwenden. Sie können auch zu anderen Seiten innerhalb einer TypeScript-Datei leiten, indem Sie die Methode router.navigate() verwenden.
So erstellen Sie eine neue Seite in einer Angular-Anwendung
Erstellen Sie zunächst eine neue Angular-Anwendung. Sie können auch eine vorhandene verwenden. Wenn Sie mit dem Erstellen einer neuen Angular-App nicht vertraut sind, können Sie sich zusammen mit anderen darüber informieren Einführungskonzepte, die in Angular verwendet werden.
-
Erstellen Sie eine neue Komponente in Ihrer Angular-App Verwendung der ng-Komponente generieren Befehl:
ng generieren Komponenten-Home - Öffne das src/app/home/home.component.html Datei, und ersetzen Sie den aktuellen Inhalt durch neuen Inhalt.
<div-Klasse="Inhalt">
<h2> Heim </h2>
<p>
Ich bin ein Fotograf, der Hochzeitsfotografie macht. Schauen Sie sich meine Projekte an!
</p>
<div-Klasse="Karte">
<h4> John & Amy </h4>
<p> Blaue Berge, Australien </p>
</div>
<div-Klasse="Karte">
<h4> Roß & Rach </h4>
<p> Hunter Valley Gardens, Australien </p>
</div>
</div> - Bevölkern Sie die src/app/home/home.component.css Datei mit Styling für den HTML-Inhalt.
.Inhalt {
Zeilenhöhe: 2Rest;
Schriftgröße: 1.2em;
}.Karte {
Box Schatten: 0 4px 8px 0 RGB(0, 0, 0, 0.2);
Breite: 400px;
Polsterung: 16px;
Rand: 24px 0px;
Hintergrundfarbe: weißer Rauch;
Schriftfamilie: serifenlos;
} - Erstellen Sie eine weitere Komponente mit der ng-Komponente generieren Befehl im Terminal. Sie verwenden die neue Komponente als About-Seite.
ng generieren Komponente über - Öffne das src/app/about/about.component.html Datei, und ersetzen Sie den aktuellen Inhalt durch neuen Inhalt.
<div-Klasse="Inhalt">
<h2> Über mich </h2>
<p>
ich'm John, und ich liebe es, Fotos zu machen. Ich fotografiere seit über 25 Jahren. Besuchen Sie mich auf meinen sozialen Medien:
</p>
<ein href=""> Facebook </a><Br>
<ein href=""> LinkedIn </a><Br>
<ein href=""> Instagram </a><Br>
</div> - Bevölkern Sie die src/app/about/about.component.css Datei mit Styling für den HTML-Inhalt.
.Inhalt {
Zeilenhöhe: 2Rest;
Schriftgröße: 1.2em;
}
So navigieren Sie zwischen den beiden Seiten
Sie können das Routing verwenden, um von einer Seite zur anderen zu navigieren. Sie können dies in einer Routing-Datei konfigurieren. Dieses Beispiel enthält eine Routing-Datei für die gesamte App, die sich in befindet src/app/app-routing.module.ts.
- Wenn Ihre App noch nicht über die App-Routing-Moduldatei verfügt, können Sie eine mithilfe von generieren ng generieren Modul Befehl. Navigieren Sie in einer Befehlszeile oder einem Terminal zum Stammordner der Anwendung und führen Sie den folgenden Befehl aus:
ng generieren modul app-routing --module app --flat - Dadurch wird eine app-routing.module.ts-Datei in Ihrer erstellt quelle/app Mappe.
- Fügen Sie oben in der Datei zusätzliche Importe für die Komponenten Home und About hinzu. Stellen Sie sicher, dass Sie auch RouterModule und CommonModule importieren; Letztendlich sollten Ihre Importanweisungen wie folgt aussehen:
importieren { CommonModul } aus '@eckig/allgemein';
importieren { Routen, RouterModul } aus '@angular/router';
importieren { HomeComponent } aus './home/home.component';
importieren {ÜberKomponente} aus './about/about.component'; - Fügen Sie unter den Importen ein neues Routen-Array hinzu, um die Pfade zu speichern, die Sie beim Weiterleiten zu den einzelnen Seiten verwenden.
konst Routen: Routen = [
{ Weg: '', Komponente: HomeComponent },
{ Weg: 'um', Komponente: AboutComponent }
]; - Ersetzen Sie den NgModule-Block durch den folgenden, der das RouterModule zum imports- und exports-Array hinzufügt.
@NgModule({
Deklarationen: [],
Importe: [
GemeinsamesModul,
RouterModule.forRoot (Routen)
],
exports: [RouterModul]
}) - In dem src/app/app.component.html -Datei, entfernen Sie den aktuellen Inhalt und fügen Sie das router-outlet-Tag hinzu.
<div-Klasse="Container">
<Router-Ausgang></router-outlet>
</div>
So navigieren Sie in einer HTML-Datei zur neuen Seite
Um zu einer Seite innerhalb einer HTML-Datei zu navigieren, verwenden Sie das Anker-Tag. Fügen Sie im href-Attribut den Pfad hinzu, den Sie im Routen-Array angegeben haben.
- In dem src/app/app.component.html Datei, fügen Sie zwei Anchor-Tags vor dem Container-Div hinzu. Auf diese Weise können Sie zwischen der Startseite und der Info-Seite navigieren.
<div-Klasse="Navigationsleiste">
<eine Klasse="Verknüpfung" href="">Heim</a>
<eine Klasse="Verknüpfung" href="/about">Um</a>
</div> - Fügen Sie etwas Styling hinzu src/app/app.component.css Datei.
.Container {
Rand: 48px 35%;
Schriftfamilie: &Zitat;Arial&Zitat;, serifenlos;
Anzeige: biegen;
Flex-Richtung: Säule;
Ausrichtungselemente: Center;
}.navbar {
Hintergrundfarbe: dunkelschiefergrau;
Polsterung: 30px 50px;
Anzeige: biegen;
Ausrichtungselemente: Center;
Schriftfamilie: serifenlos;
}.Verknüpfung: Erster Typ {
Rand rechts: 32px;
}.Verknüpfung {
Farbe: Weiß;
Textdekoration: keiner;
Schriftgröße: 14Punkt;
Schriftstärke: Fett gedruckt;
} - Fügen Sie dem gesamten Seitenrand etwas Stil hinzu src/styles.css.
Karosserie {
Rand: 0;
Polsterung: 0;
} - Navigieren Sie in einer Eingabeaufforderung oder einem Terminal zum Stammordner der Angular-Anwendung. Führen Sie die Anwendung mit dem aus ng dienen Befehl und warten Sie, bis die Kompilierung abgeschlossen ist.
ng dienen - Geben Sie in einem Browser die localhostURL in die URL-Leiste ein, um Ihre Anwendung anzuzeigen. Standardmäßig ist dies normalerweise der Fall http://localhost: 4200/.
- Ihre Website wird auf die Startseite geladen.
- Sie können zur Info-Seite navigieren, indem Sie auf den Info-Link in der Navigationsleiste klicken.
So navigieren Sie in einer TypeScript-Datei zur neuen Seite
Bisher verwendet diese Demo Standard-HTML-Links zur Bereitstellung der Navigation. Um mithilfe der TypeScript-Datei anstelle der HTML-Datei zu navigieren, können Sie verwenden router.navigate().
- In dem src/app/app.component.html Datei, entfernen Sie die Anchor-Tags und ersetzen Sie sie durch Schaltflächen-Tags. Diese Schaltflächen haben ein Click-Ereignis, das eine Funktion namens clickButton() auslöst. Wenn Sie die clickButton()-Funktion aufrufen, fügen Sie den URL-Routenpfad als Argument hinzu.
<Schaltfläche Klasse="Verknüpfung" (klick)="klicktaste('')">Heim</button>
<Schaltfläche Klasse="Verknüpfung" (klick)="klicktaste('/about')">Um</button> - Fügen Sie den Schaltflächen in etwas Styling hinzu src/app/app.component.css Datei.
Taste {
Hintergrundfarbe: Schwarz;
Polsterung: 4px 8px;
Mauszeiger: Zeiger;
} - An der Spitze der src/app/app.component.ts Datei, importieren Sie den Router.
importieren {Router} aus '@angular/router'; - Fügen Sie innerhalb der AppComponent-Klasse einen neuen Konstruktor hinzu und fügen Sie den Router in die Parameter ein.
Konstrukteur(privater Router: Router) {
} - Erstellen Sie unter dem Konstruktor eine neue Funktion namens clickButton(), die basierend auf der von Ihnen übergebenen URL zur neuen Seite navigiert.
clickButton (Pfad: Zeichenfolge) {
Dies.router.navigate([Pfad]);
} - Führen Sie den Befehl ng serve in der Eingabeaufforderung oder im Terminal erneut aus.
ng dienen - Navigieren Sie in einem Browser zu Ihrer Website. Das href wird jetzt durch zwei Schaltflächen ersetzt.
- Klick auf das Um Taste. Es wird zur About-Seite weitergeleitet.
Erstellen mehrerer Seiten in einer Angular-Anwendung
Sie können mithilfe von Routing zwischen mehreren Seiten innerhalb einer Angular-Anwendung routen. Wenn Sie separate Komponenten für jede Seite haben, können Sie Pfade für Ihre Routen innerhalb des Routing-Moduls konfigurieren.
Um über eine HTML-Datei zu einer anderen Seite zu navigieren, verwenden Sie ein Anker-Tag mit dem href-Attribut als Routing-Pfad zu dieser Seite. Um über eine TypeScript-Datei zu einer anderen Seite zu navigieren, können Sie die Methode router.navigate() verwenden.
Wenn Sie eine Angular-Anwendung erstellen, können Sie Angular-Direktiven verwenden. Diese ermöglichen es Ihnen, dynamische if-Anweisungen, for-Schleifen oder andere logische Operationen innerhalb der HTML-Datei einer Komponente zu verwenden.
