如何在Angular中创建类似Wix编辑器的侧边菜单？

一、组件结构设计 #

不用纠结用菜单还是侧边栏组件，直接用Angular原生结构搭建，核心分三块：

• 左侧固定窄菜单：放功能触发按钮
• 中间主内容区：承载网页编辑器主体
• 右侧弹出面板：动态加载配置类组件

参考结构代码：

<!-- 编辑器主容器 -->
<div class="editor-container">
  <!-- 左侧菜单 -->
  <div class="left-sidebar">
    <button class="menu-btn" (click)="togglePanel('component-settings')">⚙️</button>
    <button class="menu-btn" (click)="togglePanel('element-library')">📦</button>
    <!-- 更多功能按钮 -->
  </div>

  <!-- 中间编辑器区域 -->
  <div class="editor-main">
    <!-- 你的网页编辑器内容 -->
  </div>

  <!-- 右侧弹出面板 -->
  <div class="right-panel" *ngIf="currentPanel">
    <div class="panel-header">
      <span>{{getPanelTitle(currentPanel)}}</span>
      <button class="close-btn" (click)="currentPanel = null">×</button>
    </div>
    <div class="panel-content">
      <ng-container [ngTemplateOutlet]="getPanelTemplate(currentPanel)"></ng-container>
    </div>
  </div>
</div>

<!-- 面板模板定义 -->
<ng-template #componentSettings>
  <app-component-settings></app-component-settings>
</ng-template>
<ng-template #elementLibrary>
  <app-element-library></app-element-library>
</ng-template>

二、原生CSS实现Wix风格样式 #

不用依赖UI库，纯CSS就能搞定窄侧边栏和滑入面板效果：

.editor-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
  font-family: sans-serif;
}

/* 左侧窄菜单 */
.left-sidebar {
  width: 56px;
  background: #f8f9fa;
  border-right: 1px solid #e9ecef;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
}

.menu-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 20px;
  margin: 8px 0;
  transition: background-color 0.2s;
}

.menu-btn:hover {
  background-color: #e2e6ea;
}

/* 中间编辑器区域 */
.editor-main {
  flex: 1;
  padding: 24px;
  overflow: auto;
  background-color: #fff;
}

/* 右侧弹出面板 */
.right-panel {
  width: 340px;
  background-color: #fff;
  border-left: 1px solid #e9ecef;
  box-shadow: -2px 0 12px rgba(0, 0, 0, 0.08);
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.3s ease-out;
}

.panel-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
}

.close-btn {
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}

.close-btn:hover {
  background-color: #f8f9fa;
}

.panel-content {
  flex: 1;
  padding: 20px;
  overflow: auto;
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

三、动态加载组件逻辑 #

在组件类里处理面板切换和模板渲染逻辑：

import { Component, ViewChild, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-editor',
  templateUrl: './editor.component.html',
  styleUrls: ['./editor.component.css']
})
export class EditorComponent {
  currentPanel: string | null = null;

  @ViewChild('componentSettings') componentSettingsTpl!: TemplateRef<any>;
  @ViewChild('elementLibrary') elementLibraryTpl!: TemplateRef<any>;

  togglePanel(panel: string) {
    this.currentPanel = this.currentPanel === panel ? null : panel;
  }

  getPanelTitle(panel: string): string {
    switch(panel) {
      case 'component-settings': return '组件配置';
      case 'element-library': return '元素库';
      default: return '';
    }
  }

  getPanelTemplate(panel: string): TemplateRef<any> {
    switch(panel) {
      case 'component-settings': return this.componentSettingsTpl;
      case 'element-library': return this.elementLibraryTpl;
      default: throw new Error('未知面板类型');
    }
  }
}

四、解决Angular Material Sidenav示例无法运行的问题 #

如果坚持使用Material，先排查以下必做步骤：

1. 确认已正确安装Material：执行ng add @angular/material，按提示完成主题、动画等配置
2. 在app.module.ts中导入必要模块：

import { MatSidenavModule } from '@angular/material/sidenav';
import { MatListModule } from '@angular/material/list';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  imports: [
    // 其他基础模块（BrowserModule等）
    MatSidenavModule,
    MatListModule,
    MatButtonModule
  ]
})
export class AppModule { }

3. 确保全局样式引入Material主题：在styles.scss顶部添加

@import '@angular/material/prebuilt-themes/indigo-pink.css';

完成以上步骤后，官方Sidenav示例基本都能正常运行。

五、关于是否使用UI库的选择 #

• 若追求快速搭建，且能搞定Material的配置，用MatSidenav+MatDrawer可以快速实现侧边面板基础功能
• 若对样式定制要求高，或觉得UI库配置繁琐，用原生CSS+Angular指令完全能实现，灵活性更高，还不用依赖第三方库

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