Angular中侧边栏JavaScript交互失效问题求助

核心问题点 #

1. DOM选择器不匹配：你的TS代码里监听了.arrow类元素的点击，但提供的HTML中没有任何带.arrow类的元素，导致这部分逻辑完全无效。
2. 组件内HTML添加script标签无效：Angular会自动移除组件模板中的<script>标签，你写的document.addEventListener("DOMContentLoaded", ngAfterViewInit)根本不会执行，而且ngAfterViewInit是组件类的私有方法，全局作用域无法访问。
3. 原生DOM操作的风险：直接用document.querySelector获取元素，在Angular的变更检测机制下可能出现元素未正确初始化的情况，且未清理事件监听会导致内存泄漏。

方案一：用Angular模板事件绑定（推荐） #

完全遵循Angular组件化思路，避免原生DOM操作，代码更易维护。

1. 修改sidebar.component.html #

添加.arrow元素（实现子菜单展开逻辑），并绑定Angular点击事件：

<div class="sidebar" [class.close]="isSidebarClosed">
  <div class="logo-details">
    <i class="fas fa-institution"></i>
    <span class="logo_name">APP</span>
  </div>
  <ul class="nav-links">
    <!-- 带子菜单的项，添加arrow元素 -->
    <li [class.showMenu]="isMenuOpen('dashboard')">
      <a (click)="toggleMenu('dashboard')">
        <i class="fa fa-home"></i>
        <span class="link_name">Dashboard</span>
        <i class="bx bx-chevron-down arrow"></i>
      </a>
      <ul class="sub-menu" [class.blank]="!isMenuOpen('dashboard')">
        <li><a class="link_name" (click)="routeFunction('Dashboard')">Home</a></li>
      </ul>
    </li>
    
    <li>
      <a (click)="routeFunction('add')">
        <i class="fa fa-user-plus"></i>
        <span class="link_name">Add Payment</span>
      </a>
      <ul class="sub-menu blank">
        <li><a class="link_name" href="#">Add Payment</a></li>
      </ul>
    </li>
    
    <li>
      <a (click)="routeFunction('view')">
        <i class="fa fa-user-cog"></i>
        <span class="link_name">View Purchases</span>
      </a>
      <ul class="sub-menu blank">
        <li><a class="link_name" href="#">Manage Students</a></li>
      </ul>
    </li>
    
    <li>
      <a (click)="routeFunction('delete')">
        <i class="fa fa-plus-square"></i>
        <span class="link_name">Delete Payment</span>
      </a>
      <ul class="sub-menu blank">
        <li><a class="link_name" href="#">Delete Payment</a></li>
      </ul>
    </li>
    
    <li>
      <div class="profile-details">
        <div class="profile-content">
          <img src="profile.png" alt="profile" />
        </div>
        <div class="name-job">
          <div class="profile_name">Admin</div>
          <div class="job">Admin</div>
        </div>
        <i class="bx bx-log-out"></i>
      </div>
    </li>
  </ul>
</div>

<section class="home-section">
  <div class="home-content">
    <i class="bx bx-menu" (click)="toggleSidebar()"></i>
    <span class="text"> Dashboard</span>
  </div>
</section>

2. 修改sidebar.component.ts #

用组件属性控制菜单状态，替代原生DOM操作：

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

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css'],
})
export class SidebarComponent {
  isSidebarClosed = false;
  openMenus: Record<string, boolean> = {};

  constructor(private router: Router, private route: ActivatedRoute) {}

  toggleSidebar() {
    this.isSidebarClosed = !this.isSidebarClosed;
  }

  toggleMenu(menuKey: string) {
    this.openMenus[menuKey] = !this.openMenus[menuKey];
  }

  isMenuOpen(menuKey: string) {
    return this.openMenus[menuKey] || false;
  }

  routeFunction(name: string) {
    this.router.navigate([name]);
  }
}

方案二：用ViewChild+Renderer2安全操作DOM（兼容原有逻辑） #

如果想保留类似原生DOM的操作方式，用Angular提供的API替代原生DOM操作：

1. 修改sidebar.component.ts #

import { Component, AfterViewInit, ViewChild, ElementRef, Renderer2, QueryList, ViewChildren } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css'],
})
export class SidebarComponent implements AfterViewInit {
  @ViewChild('sidebar') sidebar!: ElementRef<HTMLElement>;
  @ViewChild('sidebarBtn') sidebarBtn!: ElementRef<HTMLElement>;
  @ViewChildren('arrow') arrows!: QueryList<ElementRef<HTMLElement>>;

  private listeners: (() => void)[] = [];

  constructor(
    private router: Router, 
    private route: ActivatedRoute,
    private renderer: Renderer2
  ) {}

  ngAfterViewInit(): void {
    // 绑定侧边栏折叠事件
    const sidebarToggle = this.renderer.listen(
      this.sidebarBtn.nativeElement,
      'click',
      () => {
        this.renderer.toggleClass(this.sidebar.nativeElement, 'close');
      }
    );
    this.listeners.push(sidebarToggle);

    // 绑定子菜单展开事件
    this.arrows.forEach(arrowEl => {
      const menuToggle = this.renderer.listen(
        arrowEl.nativeElement,
        'click',
        (e) => {
          const arrowParent = e.target?.parentElement?.parentElement;
          if (arrowParent) {
            this.renderer.toggleClass(arrowParent, 'showMenu');
          }
        }
      );
      this.listeners.push(menuToggle);
    });
  }

  ngOnDestroy(): void {
    // 清理事件监听，避免内存泄漏
    this.listeners.forEach(unsubscribe => unsubscribe());
  }

  routeFunction(name: string) {
    this.router.navigate([name]);
  }
}

2. 修改sidebar.component.html #

给需要获取的元素添加模板引用变量：

<div #sidebar class="sidebar">
  <div class="logo-details">
    <i class="fas fa-institution"></i>
    <span class="logo_name">APP</span>
  </div>
  <ul class="nav-links">
    <li>
      <a (click)="routeFunction('Dashboard')">
        <i class="fa fa-home"></i>
        <span class="link_name">Dashboard</span>
        <i #arrow class="bx bx-chevron-down arrow"></i>
      </a>
      <ul class="sub-menu blank">
        <li><a class="link_name" href="#">Home</a></li>
      </ul>
    </li>
    
    <li>
      <a (click)="routeFunction('add')">
        <i class="fa fa-user-plus"></i>
        <span class="link_name">Add Payment</span>
      </a>
      <ul class="sub-menu blank">
        <li><a class="link_name" href="#">Add Payment</a></li>
      </ul>
    </li>
    
    <li>
      <a (click)="routeFunction('view')">
        <i class="fa fa-user-cog"></i>
        <span class="link_name">View Purchases</span>
      </a>
      <ul class="sub-menu blank">
        <li><a class="link_name" href="#">Manage Students</a></li>
      </ul>
    </li>
    
    <li>
      <a (click)="routeFunction('delete')">
        <i class="fa fa-plus-square"></i>
        <span class="link_name">Delete Payment</span>
      </a>
      <ul class="sub-menu blank">
        <li><a class="link_name" href="#">Delete Payment</a></li>
      </ul>
    </li>
    
    <li>
      <div class="profile-details">
        <div class="profile-content">
          <img src="profile.png" alt="profile" />
        </div>
        <div class="name-job">
          <div class="profile_name">Admin</div>
          <div class="job">Admin</div>
        </div>
        <i class="bx bx-log-out"></i>
      </div>
    </li>
  </ul>
</div>

<section class="home-section">
  <div class="home-content">
    <i #sidebarBtn class="bx bx-menu"></i>
    <span class="text"> Dashboard</span>
  </div>
</section>

额外注意事项 #

• 确保CSS中存在.close、.showMenu这些类的样式定义，否则即使类被添加/移除也看不到效果。
• 组件模板中不要添加<script>标签，Angular不支持这种写法，所有逻辑都应该放在TS文件中。
• 避免直接用document.querySelector，它会查询整个DOM，可能获取到其他组件的元素，ViewChild/ViewChildren只会查询当前组件的模板元素。

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