求Angular Material Toolbar自适应替换内容的可运行示例

实现思路 #

1. 基于Angular Material Toolbar构建容器，结合Flex布局实现响应式的居中/全屏切换逻辑
2. 监听窗口尺寸变化，计算导航区域的溢出状态，动态控制导航链接和汉堡菜单的显示/隐藏
3. 用MatMenu实现汉堡菜单的下拉导航列表

步骤1：安装依赖 #

确保已安装必要依赖：

# 安装Angular Material（未安装时执行）
ng add @angular/material
# 安装Flex布局（可选，简化响应式布局编写）
npm install @angular/flex-layout

步骤2：导入模块 #

在组件所属模块（如app.module.ts）中导入所需模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { MatMenuModule } from '@angular/material/menu';
import { FlexLayoutModule } from '@angular/flex-layout'; // 可选，用原生CSS Flex可省略

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatButtonModule,
    MatMenuModule,
    FlexLayoutModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

步骤3：组件代码实现 #

HTML模板（app.component.html）

<mat-toolbar color="primary" class="toolbar">
  <div class="toolbar-container" fxLayout="row" fxLayoutAlign="space-between center">
    <!-- Logo区域 -->
    <a class="logo" href="#">Angular Landing</a>

    <!-- 导航链接：空间充足时显示 -->
    <div class="nav-links" #navContainer fxLayout="row" fxLayoutGap="2rem">
      <a href="#" class="nav-link">Home</a>
      <a href="#" class="nav-link">Features</a>
      <a href="#" class="nav-link">Pricing</a>
      <a href="#" class="nav-link">Testimonials</a>
      <a href="#" class="nav-link">Contact</a>
    </div>

    <!-- 汉堡菜单：空间不足时显示 -->
    <button
      mat-icon-button
      [matMenuTriggerFor]="menu"
      class="menu-toggle"
      *ngIf="showMenuToggle"
    >
      <mat-icon>menu</mat-icon>
    </button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item><a href="#">Home</a></button>
      <button mat-menu-item><a href="#">Features</a></button>
      <button mat-menu-item><a href="#">Pricing</a></button>
      <button mat-menu-item><a href="#">Testimonials</a></button>
      <button mat-menu-item><a href="#">Contact</a></button>
    </mat-menu>
  </div>
</mat-toolbar>

<!-- 测试用内容区 -->
<div class="content">
  <p>调整窗口宽度，查看工具栏的响应式变化</p>
</div>

TypeScript逻辑（app.component.ts）

import { Component, ElementRef, OnInit, ViewChild, HostListener } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  @ViewChild('navContainer') navContainer!: ElementRef;
  showMenuToggle = false;

  ngOnInit(): void {
    this.checkNavOverflow();
  }

  // 监听窗口尺寸变化
  @HostListener('window:resize')
  onWindowResize(): void {
    this.checkNavOverflow();
  }

  // 判断导航区域是否溢出
  private checkNavOverflow(): void {
    const container = this.navContainer.nativeElement;
    this.showMenuToggle = container.offsetWidth < container.scrollWidth;
  }
}

CSS样式（app.component.scss）

.toolbar {
  position: sticky;
  top: 0;
  z-index: 100;

  .toolbar-container {
    padding: 0 1rem;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

    // 屏幕宽度超过1200px时，容器全屏展示
    @media (min-width: 1201px) {
      max-width: 100%;
      padding: 0 2rem;
    }
  }

  .logo {
    color: white;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: bold;
  }

  .nav-links {
    overflow: hidden;

    .nav-link {
      color: white;
      text-decoration: none;
      padding: 0.5rem 0;
      transition: opacity 0.2s;

      &:hover {
        opacity: 0.8;
      }
    }
  }

  .menu-toggle {
    color: white;
  }
}

.content {
  padding: 2rem;
  min-height: 100vh;
}

功能说明 #

1. 居中/全屏切换：屏幕宽度≤1200px时，工具栏内容居中（最大宽度1200px）；宽度>1200px时，内容全屏展示（左右保留边距）
2. 溢出自适应：当导航链接总宽度超过可用空间时，自动隐藏导航链接，显示右侧汉堡菜单；点击菜单可展开完整导航列表
3. 粘性定位：工具栏固定在页面顶部，滚动时保持可见

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