如何在Angular项目中集成circular-menu.js并解决初始化报错问题

出错原因 #

• 初始化时机错误：直接在组件类属性声明阶段执行CMenu("#menu1")初始化，此时组件DOM尚未渲染完成，页面不存在id为menu1的元素，导致CMenu调用时获取节点失败抛出错误
• 选择器适配问题：Angular组件存在DOM隔离，直接使用全局字符串选择器#menu1可能出现匹配不到节点的问题
• 样式隔离影响：Angular默认开启组件样式封装，写在组件scss中的菜单全局样式可能不生效，导致菜单渲染异常
• 脚本加载时序问题：若angular.json中引入的CMenu脚本加载晚于组件初始化逻辑，会出现CMenu is not defined的报错

解决方案 #

1. 调整初始化逻辑到DOM渲染完成的生命周期钩子中，使用Angular原生的ViewChild获取DOM节点，避免全局选择器的适配问题，参考代码如下：

import { Component, AfterViewInit, ViewChild, ElementRef, ViewEncapsulation } from '@angular/core';

// 全局类型声明
declare const CMenu: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
  // 若组件内样式不生效，可取消下方注释关闭样式封装，注意避免全局样式污染
  // encapsulation: ViewEncapsulation.None
})
export class AppComponent implements AfterViewInit {
  // 绑定模板中的menu1节点
  @ViewChild('menu1') menuRef!: ElementRef;
  menuInstance?: any;

  ngAfterViewInit(): void {
    // 提前判断脚本与节点是否就绪，避免运行时报错
    if (typeof CMenu !== 'undefined' && this.menuRef?.nativeElement) {
      this.menuInstance = CMenu(this.menuRef.nativeElement).config({
        // 此处填写你的菜单配置项，与示例配置规则完全一致
      })
    }
  }
}

2. 调整组件模板写法，给菜单节点加上模板引用变量：

<!-- 保留原id用于样式匹配，增加#menu1模板引用供ViewChild获取 -->
<div #menu1 id="menu1" class="your-menu-class"></div>

3. 验证资源引入路径正确性，确认angular.json中引入的脚本、样式路径为正确的相对路径，示例如下：

"styles": [
  "node_modules/circular-menu/dist/circular-menu.min.css",
  "src/styles.scss"
],
"scripts": [
  "node_modules/circular-menu/dist/circular-menu.min.js"
]

4. 若菜单样式异常，可将菜单相关的全局样式移动到项目根目录的styles.scss全局样式文件中，避免组件样式封装的影响。

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