Erstellen einer Navigationsleiste in Angular

1. Die Navigationsleiste in Angular
2. Erstellen Sie eine Navigationsleiste in Angular

Dieses Tutorial stellt vor, wie man eine Navigationsleiste in Angular erstellt und sie für die Navigation in Angular-Anwendungen verwendet.

Die Navigationsleiste in Angular

Navbar ist einer der wesentlichen Bestandteile jeder Webanwendung. Selbst beim Erstellen einer Single-Page-Anwendung (SPA), die nur aus einer Seite, aber verschiedenen Abschnitten besteht, verwenden wir immer noch die Navigationsleiste, um von einem Abschnitt zum anderen zu navigieren.

Mit Navbar können Benutzer in Ihren Webanwendungen leicht finden, wonach sie suchen.

Es gibt viele Methoden zur Navigation, um ein einfaches bis komplexes Routing zu erreichen. Angular bietet ein separates Modul, das uns hilft, eine Navigationsleiste in unserer Webanwendung zu erstellen und für die Navigation zu verwenden.

Wir können die Router-Methode navigate() verwenden, wenn wir den Benutzer programmgesteuert von einer Seite zur anderen navigieren möchten, was bedeutet, dass wir durch Komponenten navigieren, ohne die genauen Links zu verwenden. Wir verwenden stattdessen Komponentennamen.

Erstellen Sie eine Navigationsleiste in Angular

Lassen Sie uns ein Beispiel durchgehen, in dem wir eine Navigationsleiste erstellen und sie verwenden, um mit navigate() durch verschiedene Komponenten zu navigieren. Lassen Sie uns also mit dem folgenden Befehl eine neue Anwendung erstellen.

# angular
ng new my-app

Nachdem wir unsere neue Anwendung erstellt haben, wechseln wir mit diesem Befehl in unser Anwendungsverzeichnis.

# angular
cd my-app

Lassen Sie uns nun unsere App ausführen, um sicherzustellen, dass alle Abhängigkeiten korrekt installiert sind.

# angular
ng serve --open

Erzeugen von Navbar-Komponenten in Angular

Lassen Sie uns nun die Navbar-Komponenten generieren. Zuerst generieren wir unsere index-Komponente, die als home-Komponente unserer Anwendung fungiert.

# angular
ng generate component index

Dann generieren wir die Komponente about us.

# angular
ng generate component aboutUs

Zuletzt generieren wir unsere Komponente products mit dem folgenden Befehl.

# angular
ng generate component products

Wir haben 3 Komponenten in separaten Ordnern mit 3 Dateien, die Sie unten sehen können.

Ausgabe:

Erstellen Sie die Ansichten für die Komponenten

Jetzt erstellen wir Ansichten für unsere Komponenten. Zuerst öffnen wir aboutUs.component.html aus dem Ordner about und fügen den folgenden Code hinzu.

# angular
<div class="container" >
  <h1> This is about Us Component </h1>
  <h3> This is the content of About Us </h3>
</div>

Als nächstes öffnen wir die Datei index.component.html aus dem Ordner home und fügen den folgenden Code hinzu.

# angular
<div class="container">
 <h1> This is index component </h1>
  <h3> This is the content of Index </h3>
</div>

Wir öffnen die Datei products.component.html aus dem Ordner services und fügen den folgenden Code hinzu.

# angular
<div class="container">
 <h1> This is products component </h1>
  <h3> This is the content of Products </h3>
</div>

Definieren Sie die Komponentenrouten

Nachdem wir unsere Komponenten und Views erstellt haben, definieren wir unsere Routen in app-routing.module.ts.

Wir werden ngModule importieren. Wir werden auch Routes und RouterModule aus dem Router importieren und nicht zuletzt die soeben erstellten Komponenten.

# angular
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutUsComponent}  from './aboutUs/aboutUs.component';
import { IndexComponent} from './index/index.component';
import { ProductsComponent } from './products/products.component';

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Nach dem Import definieren wir die Routen unserer Komponenten, wie unten gezeigt.

# angular
const routes: Routes = [

    { path: 'aboutUs', component: AboutUsComponent },
    { path: 'index', component: IndexComponent},
    { path: 'products', component: ProductsComponent },
 ];

Ein Navigationsmenü erstellen

Wir werden dann unser Navigationsmenü in app.component.html erstellen. Jeder Link ruft eine Funktion mit der Methode (click) auf.

Wir werden die Komponentendaten mit router-outlet wie unten gezeigt anzeigen.

# angular
<ul class="nav navbar-nav">
  <li>
    <a (click)="goToIndex()">Home</a>
  </li>
  <li>
    <a (click)="goToAboutUs()">About Us</a>
  </li>
  <li>
    <a (click)="goToProducts()">Products</a>
  </li>
</ul>

<router-outlet> </router-outlet>

Erstellen Sie die Funktionen zum Navigieren zwischen Komponenten

Als nächstes erstellen wir unsere Funktionen goToIndex(), goToAboutUs() und goToProducts(). Wir öffnen app.component.ts und importieren Router.

Mit router.navigate() erstellen wir diese Funktionen, um zwischen Komponenten zu navigieren.

# angular
import { Component } from '@angular/core';
import { Router } from '@angular/router';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  constructor(private router: Router) {
  }

  goToIndex() {
    this.router.navigate(['/', 'index']);
  }
  goToAboutUs() {
    this.router.navigate(['/', 'aboutUs']);
  }
  goToProducts() {
    this.router.navigate(['/', 'products']);
  }
}

Ausgabe:

Wie Sie dem Beispiel entnehmen können, können wir in unseren Angularanwendungen ganz einfach eine Navigationsleiste erstellen und diese verwenden, um mithilfe von navigate() zwischen Komponenten zu navigieren und Routen zu definieren.

Sie können auf den vollständigen Code zugreifen, der in diesem Tutorial verwendet wird.