基于Angular Material开发Angular应用侧边导航的技术咨询

Hey there! Let's walk through how to polish up your Angular Material SideNav implementation based on the code snippet you shared. Here are some key improvements and best practices:

Your current code uses <p> tags for navigation items, which lacks built-in interactivity and styling. Swap those out for mat-nav-list and mat-list-item—these are purpose-built for side navigation and come with hover states, icon alignment, and easy router integration:

<mat-sidenav mode="side" opened="true">
  <mat-nav-list>
    <a mat-list-item routerLink="/dashboard">
      <mat-icon>dashboard</mat-icon>
      <span>Dashboard</span>
    </a>
    <a mat-list-item routerLink="/incidents">
      <mat-icon>report</mat-icon>
      <span>Incidents</span>
    </a>
    <!-- Add more nav items here as needed -->
  </mat-nav-list>
</mat-sidenav>

Right now your sidenav is always open in "side" mode, which won't work well on small screens. Use Angular's BreakpointObserver to dynamically adjust the sidenav's mode and open state based on screen size:

First, add this logic to your component class:

import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-side-nav',
  templateUrl: './side-nav.component.html',
  styleUrls: ['./side-nav.component.css']
})
export class SideNavComponent {
  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
    .pipe(
      map(result => result.matches)
    );

  constructor(private breakpointObserver: BreakpointObserver) {}
}

Then update your template to use this observable:

<mat-toolbar class="example-header" color="primary">
  <!-- Only show menu button on mobile -->
  <button mat-icon-button (click)="sidenav.toggle()" *ngIf="isHandset$ | async">
    <mat-icon>menu</mat-icon>
  </button>
  <span class="company-name">Yaana</span>
</mat-toolbar>

<mat-sidenav-container>
  <!-- Reference the sidenav with #sidenav for toggle control -->
  <mat-sidenav #sidenav 
               [mode]="(isHandset$ | async) ? 'over' : 'side'" 
               [opened]="!(isHandset$ | async)">
    <mat-nav-list>
      <a mat-list-item routerLink="/dashboard">
        <mat-icon>dashboard</mat-icon>
        <span>Dashboard</span>
      </a>
      <a mat-list-item routerLink="/incidents">
        <mat-icon>report</mat-icon>
        <span>Incidents</span>
      </a>
    </mat-nav-list>
  </mat-sidenav>

  <!-- Main content area -->
  <mat-sidenav-content>
    <!-- Your main app content goes here (router outlet if using routing) -->
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

Add some custom CSS to make the layout feel cohesive:

.example-header {
  position: sticky;
  top: 0;
  z-index: 100; /* Ensure toolbar stays above sidenav */
}

.company-name {
  margin-left: 1rem; /* Add spacing between menu button and company name */
}

mat-sidenav {
  width: 250px; /* Fixed width for consistency */
}

mat-sidenav-content {
  padding: 1rem; /* Add padding to main content */
}

If you're using routerLink, make sure:

• You've imported RouterModule.forRoot(routes) in your AppModule
• You've defined your routes in app-routing.module.ts, like:

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent },
  { path: 'incidents', component: IncidentsComponent },
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' }
];

Let me know if you need help with any specific part—like adding active states for nav items or customizing the sidenav's appearance further!

内容的提问来源于stack exchange，提问作者Anil