如何在Angular中实现菜单激活及Docker子菜单自动展开？

没问题！我帮你把原来的jQuery逻辑转换成Angular的实现方式，毕竟Angular更推荐组件化的DOM操作方式，而不是直接像jQuery那样全局操作~

步骤1：给模板元素添加模板引用变量 #

首先，在你的组件模板里，给需要操作的元素加上模板引用变量（替代直接用ID获取DOM，更符合Angular的组件化思想）：

修改Docker菜单的触发按钮：

<li id="dockerMenu">
  <!-- 添加#dockerMenuToggle模板引用 -->
  <a #dockerMenuToggle data-toggle="collapse" href="#docker-pages" aria-expanded="false" aria-controls="testing-main.webapp.pages">
    <img src="../resources/img/icons/docker-icon.png" alt="" class="menuIcon">
    <span class="menu-title">Docker <i class="fa fa-sort-down"></i></span>
  </a>
  <div class="collapse" id="docker-pages">
    <ul class="nav flex-column sub-menu" data-simplebar>
      <security:authorize access="hasAuthority('Administrator')">
        <!-- 给docker-logs的li添加#dockerLogsItem模板引用 -->
        <li class="nav-item" id="docker-logs" #dockerLogsItem>
          <a href="/docker-logs">
            <img src="../resources/img/icons/logs.png" alt="">
            <span class="menu-title">Container Logs</span>
          </a>
        </li>
        <!-- 其他子菜单项... -->
      </security:authorize>
    </ul>
  </div>
</li>

步骤2：在组件类中获取元素引用并实现逻辑 #

接下来，在你的组件里导入ViewChild和ElementRef，获取模板引用的元素，然后在toggleMenus方法中完成激活和菜单展开的逻辑：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
// 如果用Angular Router，还需要导入Router和NavigationEnd
import { Router, NavigationEnd } from '@angular/router';

@Component({
  selector: 'app-your-component', // 替换成你的组件选择器
  templateUrl: './your-component.component.html', // 替换成你的模板路径
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  // 获取模板引用的元素
  @ViewChild('dockerLogsItem') dockerLogsItem: ElementRef<HTMLLIElement>;
  @ViewChild('dockerMenuToggle') dockerMenuToggle: ElementRef<HTMLAnchorElement>;

  constructor(private router: Router) {} // 注入Router（可选，推荐用路由监听）

  ngOnInit() {
    // 推荐用Angular Router监听路由变化，而不是直接读window.location
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        this.toggleMenus(event.urlAfterRedirects);
      }
    });
    // 如果不需要路由监听，直接调用也可以：this.toggleMenus(window.location.pathname);
  }

  toggleMenus(url: string) {
    console.log(url);
    switch(url) {
      case "/docker-logs":
        // 给目标li添加active类
        this.dockerLogsItem.nativeElement.classList.add('active');
        // 触发菜单按钮的点击事件，展开子菜单
        this.dockerMenuToggle.nativeElement.click();
        break;
      // 可以继续添加其他路由的case分支
    }
  }
}

为什么这么做？ #

• 用ViewChild获取元素是Angular官方推荐的组件内DOM操作方式，避免了全局DOM查询的弊端
• 用Angular Router的NavigationEnd事件监听路由变化，比直接读取window.location更适合单页应用场景，能准确捕获路由跳转后的路径
• 逻辑和你原来的jQuery代码完全对应：激活目标菜单项 + 展开父菜单

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