Skab en Dynamisk Navigationsbar med Angular Material

Udviklere elsker genveje, og en af de mest effektive måder at spare tid på er ved at lade din navigationsbar i Angular-applikationen dynamisk generere links direkte fra din rute-konfiguration. Dette betyder, at enhver ændring du laver i dine ruter – hvad enten du tilføjer eller sletter dem – automatisk vil blive afspejlet i din navigationsbar. I dag dykker vi ned i, hvordan du opnår netop dette med Angular Material.

1. Oprettelse af Navigationsbaren

Først og fremmest skal vi have selve navigationsbaren på plads. Angular Material tilbyder en bekvem schematic, der automatisk kan generere dette for os. Åbn din terminal og kør følgende kommando:

ng generate @angular/material:navigation navbar

Dette vil oprette en ny komponent ved navn navbar, som vil blive vist i din applikation. Som standard vil denne komponent typisk indeholde et par eksempler på links. Vores mål er at erstatte disse statiske links med links, der dynamisk udtrækkes fra vores applikations rute-konfiguration.

2. Deklaration af Ruter

Det næste skridt er at definere de primære ruter for din applikation. Dette gøres i filen app.routes.ts. Her deklarerer vi alle de top-level ruter, som vores navigationsbar skal kunne håndtere. Et eksempel kunne se således ud:

import { Routes } from '@angular/router'; export const routes: Routes = [ { path: '', title: 'Hjem', data: { icon: 'home' }, // Data til ikon loadComponent: () => import('./home/home.component').then(m => m.HomeComponent), }, { path: 'indstillinger', title: 'Indstillinger', data: { icon: 'settings' }, // Data til ikon loadComponent: () => import('./settings/settings.component').then(m => m.SettingsComponent), }, { path: 'logud', title: 'Logud', data: { icon: 'logout' }, // Data til ikon loadComponent: () => import('./logout/logout.component').then(m => m.LogoutComponent), } ]; 

Bemærk, at vi har tilføjet en data-property til hver rute. Denne property vil vi senere bruge til at tilføje ikoner til vores navigationslinks, hvilket giver en mere visuelt tiltalende brugeroplevelse.

3. Dynamisk Rendering af Ruter i Navigationsbaren

Nu vender vi tilbage til vores navbar.component.ts fil. Her skal vi implementere logikken til at hente og vise vores ruter dynamisk. Først importerer vi de nødvendige moduler og vores definerede ruter:

import { Component, inject } from '@angular/core'; import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout'; import { AsyncPipe } from '@angular/common'; import { MatToolbarModule } from '@angular/material/toolbar'; import { MatButtonModule } from '@angular/material/button'; import { MatSidenavModule } from '@angular/material/sidenav'; import { MatListModule } from '@angular/material/list'; import { MatIconModule } from '@angular/material/icon'; import { Observable } from 'rxjs'; import { map, shareReplay } from 'rxjs/operators'; import { routes } from '../app.routes'; // Importerer vores rute-konfiguration import { RouterModule } from '@angular/router'; @Component({ selector: 'app-navbar', templateUrl: './navbar.component.html', styleUrl: './navbar.component.scss', standalone: true, imports: [ MatToolbarModule, MatButtonModule, MatSidenavModule, MatListModule, MatIconModule, AsyncPipe, RouterModule ] }) export class NavbarComponent { routes = routes; // Gør vores ruter tilgængelige i templaten private breakpointObserver = inject(BreakpointObserver); // Observable til at tjekke, om skærmen er en 'handset' (typisk mobil) isHandset$: Observable = this.breakpointObserver .observe(Breakpoints.Handset) .pipe( map(result => result.matches), shareReplay() ); } 

I vores navbar.component.html-fil bruger vi nu en @for-løkke til at iterere over vores importerede ruter og generere et navigationslink for hver:

Menu @for (item of routes; track $index) { @if (item.data && item.data['icon']) { {{ item.data['icon'] }} } {{item.title}} }  @if (isHandset$ | async) { menu } Min App

Med disse ændringer vil din navigationsbar nu automatisk vise alle de top-level ruter, der er defineret i din app.routes.ts-fil. Hver gang du tilføjer eller fjerner en rute der, vil ændringerne øjeblikkeligt blive afspejlet i din navigationsbar.

4. Tilføjelse af Ikoner

For at gøre navigationsbaren endnu mere brugervenlig og visuelt tiltalende, kan vi tilføje ikoner til hvert menupunkt. Som vist i sektion 2, har vi allerede tilføjet en data-property til hver rute i app.routes.ts, hvor vi specificerer navnet på det ønskede Material Design ikon.

I navbar.component.html-filen har vi også tilføjet logikken til at vise disse ikoner. For hver item i vores routes-løkke tjekker vi, om item.data eksisterer og indeholder en icon-key. Hvis dette er tilfældet, renderes et <mat-icon>-element med den angivne ikon-værdi. matListItemIcon-attributten sikrer korrekt layout inden for <mat-list-item>.

5. Responsivitet og Brugervenlighed

Angular Material's navigation schematic inkluderer allerede indbygget understøttelse for responsivitet. isHandset$-observablen, som vi definerede i NavbarComponent, bruges til at bestemme, om applikationen vises på en lille skærm (som en mobiltelefon). Afhængigt af denne værdi, ændres mat-sidenav's mode (fra 'side' til 'over') og opened-status. På mobile enheder vil sidebaren typisk være skjult og kunne åbnes via en menu-knap.

For at styre visningen af menu-knappen på mobile enheder, kan vi bruge @if (isHandset$ | async)-direktivet omkring knappen, der åbner sidebaren.

Sammenligning af Tilgange

Lad os se på, hvordan den dynamiske tilgang adskiller sig fra en statisk tilgang:

Ofte Stillede Spørgsmål (FAQ)

Hvad er en 'navbar'-komponent i Angular?

En 'navbar' (navigationsbar) er et essentielt UI-element i de fleste webapplikationer. Den giver brugerne nem adgang til forskellige sektioner eller sider i applikationen. I Angular bygges dette typisk som en genbrugelig komponent.

Hvordan tilføjer jeg Angular Material til mit projekt?

Du kan tilføje Angular Material til dit eksisterende Angular-projekt ved at køre kommandoen:

ng add @angular/material

Følg derefter instruktionerne i terminalen for at vælge et tema og konfigurere installationen.

Kan jeg bruge andre ikoner end Material Icons?

Ja, det kan du. Hvis du bruger et andet ikon-bibliotek, skal du blot sørge for at importere og konfigurere det korrekt i dit projekt og tilpasse <mat-icon>-elementet eller erstatte det med det relevante ikon-komponent fra dit valgte bibliotek.

Hvordan sikrer jeg, at kun menu-knappen vises på mobilen?

Du kan bruge @if (isHandset$ | async)-direktivet i din HTML-template omkring de elementer, der kun skal vises på mobile enheder, som f.eks. hamburgermenu-knappen til at åbne sidebaren.

Konklusion

Ved at følge disse trin kan du nemt og effektivt oprette en dynamisk og responsiv navigationsbar i din Angular-applikation ved hjælp af Angular Material. Denne metode sikrer, at din navigation altid er synkroniseret med din applikations rute-struktur, hvilket minimerer manuelt arbejde og reducerer risikoen for fejl. Den integrerede ikon-understøttelse og responsivitet bidrager yderligere til en forbedret brugeroplevelse på tværs af alle enheder.

Hvis du vil læse andre artikler, der ligner Dynamisk navigation med Angular Material, kan du besøge kategorien Teknologi.