如何用Angular-Material创建全屏覆盖导航？求Angular风格示例

嘿，我刚好之前做过适配这个技术栈的全屏覆盖导航，完全是Angular风格的模块化实现，你可以直接拿过来用，省得自己造轮子：

1. 生成专属组件 #

先通过Angular CLI创建一个独立的组件，保证代码模块化：

ng generate component fullscreen-overlay-nav

2. 组件模板（fullscreen-overlay-nav.component.html） #

这里用Angular Material的基础组件+Flex-Layout来实现全屏布局，逻辑清晰：

<!-- 触发按钮 -->
<button mat-icon-button (click)="toggleOverlay()">
  <mat-icon>menu</mat-icon>
</button>

<!-- 全屏覆盖导航层 -->
<div *ngIf="isOverlayOpen" 
     class="fullscreen-overlay"
     fxLayout="column"
     fxLayoutAlign="center center"
     (click)="closeOverlay()">
  <!-- 导航列表 -->
  <mat-list class="nav-list">
    <mat-list-item (click)="handleNavClick('home'); $event.stopPropagation()">
      <mat-icon>home</mat-icon>
      <span>首页</span>
    </mat-list-item>
    <mat-list-item (click)="handleNavClick('profile'); $event.stopPropagation()">
      <mat-icon>person</mat-icon>
      <span>个人中心</span>
    </mat-list-item>
    <mat-list-item (click)="handleNavClick('settings'); $event.stopPropagation()">
      <mat-icon>settings</mat-icon>
      <span>设置</span>
    </mat-list-item>
  </mat-list>
</div>

3. 组件样式（fullscreen-overlay-nav.component.scss） #

设置全屏覆盖的样式，结合Material的视觉风格：

.fullscreen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 1000; /* 确保在其他内容之上 */
  cursor: pointer;

  .nav-list {
    width: 100%;
    max-width: 300px;
    cursor: default;

    mat-list-item {
      color: white;
      font-size: 1.5rem;
      padding: 1rem 2rem;
      transition: background-color 0.2s;

      &:hover {
        background-color: rgba(255, 255, 255, 0.1);
      }

      mat-icon {
        margin-right: 1rem;
        font-size: 2rem;
      }
    }
  }
}

4. 组件逻辑（fullscreen-overlay-nav.component.ts） #

控制导航的显示/隐藏，以及导航项的点击逻辑：

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

@Component({
  selector: 'app-fullscreen-overlay-nav',
  templateUrl: './fullscreen-overlay-nav.component.html',
  styleUrls: ['./fullscreen-overlay-nav.component.scss']
})
export class FullscreenOverlayNavComponent {
  isOverlayOpen = false;

  constructor(private router: Router) {}

  toggleOverlay(): void {
    this.isOverlayOpen = !this.isOverlayOpen;
  }

  closeOverlay(): void {
    this.isOverlayOpen = false;
  }

  handleNavClick(route: string): void {
    this.closeOverlay();
    // 这里添加路由跳转逻辑，适配你的项目路由
    this.router.navigate([`/${route}`]);
  }
}

5. 模块导入（确保在你的模块中添加这些依赖） #

在AppModule或者对应功能模块中导入所需的Angular Material和Flex-Layout模块（注意Angular 5要匹配对应版本的依赖，比如@angular/flex-layout@5.x.x）：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { FlexLayoutModule } from '@angular/flex-layout';
import { RouterModule } from '@angular/router';

import { FullscreenOverlayNavComponent } from './fullscreen-overlay-nav/fullscreen-overlay-nav.component';
import { AppComponent } from './app.component';

// 示例路由配置，替换成你的项目路由
const routes = [
  { path: 'home', component: /* 你的首页组件 */ },
  { path: 'profile', component: /* 你的个人中心组件 */ },
  { path: 'settings', component: /* 你的设置组件 */ },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
];

@NgModule({
  declarations: [
    AppComponent,
    FullscreenOverlayNavComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule, // Material组件必须依赖动画模块
    MatButtonModule,
    MatIconModule,
    MatListModule,
    FlexLayoutModule,
    RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

6. 使用组件 #

直接在你的根组件或者需要的地方引入这个导航组件即可：

<app-fullscreen-overlay-nav></app-fullscreen-overlay-nav>
<!-- 其他页面内容 -->

可选优化 #

• 如果需要动画效果，可以引入Angular的@angular/animations模块，给覆盖层添加淡入淡出/滑入滑出的动画
• 可以根据需求修改背景色、导航项的样式或者布局方式
• 若需要支持键盘关闭（比如ESC键），可以在组件中添加键盘事件监听

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