如何在Angular中适配改造原生JS实现的可折叠侧边栏

Angular原生支持类绑定和事件绑定，无需引入jQuery即可实现完全相同的效果，具体实现步骤如下：

• 第一步：编写组件逻辑（对应你项目里的admin.component.ts文件）
  在组件类中定义状态变量和切换方法：

import { Component } from '@angular/core';

@Component({
  selector: 'app-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['./admin.component.css']
})
export class AdminComponent {
  // 控制侧边栏展开状态的变量，默认展开
  isSidebarOpen = true;

  // 点击汉堡按钮时触发的切换方法
  toggleSidebar(): void {
    this.isSidebarOpen = !this.isSidebarOpen;
  }
}

• 第二步：修改组件模板（对应admin.component.html文件）
  给对应的元素绑定事件和CSS类：

1. 找到你的汉堡按钮元素，添加点击事件绑定：

<!-- 你的汉堡按钮原有属性保留，新增下面的click绑定 -->
<button id="burger" (click)="toggleSidebar()">
  <!-- 按钮内部内容 -->
</button>

2. 找到侧边栏容器元素，绑定expanded类：

<!-- 侧边栏原有属性保留，新增ngClass绑定 -->
<div class="sidebar" [ngClass]="{'expanded': isSidebarOpen}">
  <!-- 侧边栏内部内容 -->
</div>

3. 找到所有侧边栏项的标题元素，绑定hide类：

<!-- 标题原有属性保留，新增ngClass绑定 -->
<span class="sidebar-item-title" [ngClass]="{'hide': !isSidebarOpen}">
  <!-- 标题文字 -->
</span>

• 第三步：保留原有CSS样式
  你之前定义的.expanded、.hide相关的CSS规则不需要修改，Angular会自动根据状态变量的值添加/移除对应类，实现和jQuery版本完全一致的交互效果。

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