如何在Angular的sidebar.component.ts中使用JS函数实现可折叠侧边栏

你写的原生JS代码在Angular中不生效的核心原因是执行时机不符合Angular的渲染逻辑、手动操作DOM的方式不符合框架最佳实践，按以下方案修改即可实现需求：

第一步：在sidebar.component.ts中定义状态和切换方法 #

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common'; // 需导入CommonModule才能使用ngClass、属性绑定等内置能力

@Component({
  selector: 'app-sidebar',
  standalone: true, // 独立组件需标注该属性
  imports: [CommonModule],
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent {
  // 定义响应式折叠状态
  isCollapsed = false;

  // 切换侧边栏状态方法
  toggleSidebar(): void {
    this.isCollapsed = !this.isCollapsed;
  }
}

第二步：修改sidebar.component.html模板 #

通过Angular原生的事件绑定、属性绑定实现逻辑，完全不需要手动操作DOM：

<!-- 侧边栏容器，绑定collapse类和过渡效果 -->
<div class="side-bar transition-all duration-300" [class.collapse]="isCollapsed">
  <!-- 顶部logo区域，箭头图标绑定点击事件和动态class -->
  <div class="logo-name">
    <i 
      id="logo-name__icon"
      [ngClass]="isCollapsed ? 'bx bx-arrow-from-left logo-name__icon collapse' : 'bx bx-arrow-from-right logo-name__icon'"
      (click)="toggleSidebar()"
    ></i>
  </div>

  <!-- 侧边栏菜单示例，文字区域绑定折叠隐藏逻辑 -->
  <ul class="sidebar-menu">
    <li class="menu-item flex items-center gap-2">
      <i class="bx bx-home"></i>
      <span class="menu-text" [class.hidden]="isCollapsed">首页</span>
    </li>
    <!-- 其余菜单项逻辑同上 -->
  </ul>
</div>

第三步：补充Tailwind样式规则 #

不需要写自定义CSS，直接通过Tailwind类实现折叠效果：

• 侧边栏默认宽度设为w-64，collapse状态对应样式为w-16 overflow-hidden
• 菜单项文字默认正常展示，折叠时通过hidden类隐藏，需要过渡效果可替换为opacity-0 invisible配合过渡属性实现渐隐

原代码失效原因 #

1. 原生JS代码如果在组件初始化阶段执行，此时侧边栏DOM还未渲染完成，document.querySelector无法获取到对应元素，事件绑定自然无效
2. 手动操作DOM会绕开Angular的变更检测机制，容易出现视图和状态不同步的问题
3. 原生事件绑定如果未在组件销毁时手动解绑，会存在内存泄漏风险

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