Angular结合Bootstrap5无原生JS实现侧边栏显隐切换方案咨询

第一步：调整组件模板代码 #

对原有HTML模板做两处修改，移除原JS绑定的依赖，改用Angular的原生绑定：

1. 给侧边栏导航绑定active类的状态
2. 给切换按钮绑定点击触发的方法

<div class="wrapper d-flex align-items-stretch">
    <!-- 新增[class.active]绑定侧边栏状态 -->
    <nav id="sidebar" [class.active]="isSidebarActive">
        <div class="custom-menu">
            <!-- 新增(click)绑定侧边栏切换方法 -->
            <button type="button" id="sidebarCollapse" class="btn btn-primary" (click)="toggleSidebar()">
                <i class="fa fa-bars"></i>
                <span class="sr-only">Toggle Menu</span>
            </button>
        </div>
        <div class="p-4 pt-5">
            <h1><a href="index.html" class="logo">Splash</a></h1>
            <ul class="list-unstyled components mb-5">
                <li class="active">
                    <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Home</a>
                    <ul class="collapse list-unstyled" id="homeSubmenu">
                        <li>
                            <a href="#">Home 1</a>
                        </li>
                        <li>
                            <a href="#">Home 2</a>
                        </li>
                        <li>
                            <a href="#">Home 3</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false"
                        class="dropdown-toggle">Pages</a>
                    <ul class="collapse list-unstyled" id="pageSubmenu">
                        <li>
                            <a href="#">Page 1</a>
                        </li>
                        <li>
                            <a href="#">Page 2</a>
                        </li>
                        <li>
                            <a href="#">Page 3</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Portfolio</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- Page Content  -->
    <div id="content" class="p-4 p-md-5 pt-5">
        <h2 class="mb-4">Sidebar #02</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
            ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
            anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
            ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
            anim id est laborum.</p>
    </div>
</div>

第二步：编写组件TypeScript逻辑 #

打开对应组件的.ts文件，添加状态变量、切换方法和窗口高度适配逻辑，完全不需要引入jQuery：

import { Component, HostListener, OnInit } from '@angular/core';

@Component({
  selector: 'app-your-component-name', // 替换为你实际的组件选择器
  templateUrl: './your-component-name.component.html', // 替换为你实际的模板文件路径
  styleUrls: ['./your-component-name.component.css'] // 替换为你实际的样式文件路径
})
export class YourComponentNameComponent implements OnInit {
  // 侧边栏激活状态标识
  isSidebarActive: boolean = false;
  // 存储当前窗口高度
  windowHeight: number = window.innerHeight;

  ngOnInit(): void {
    // 初始化时设置全屏高度，对应原JS的fullHeight逻辑
    this.setFullHeight();
  }

  // 监听窗口resize事件，动态更新高度
  @HostListener('window:resize', ['$event'])
  onWindowResize() {
    this.windowHeight = window.innerHeight;
    this.setFullHeight();
  }

  // 侧边栏显隐切换方法
  toggleSidebar() {
    this.isSidebarActive = !this.isSidebarActive;
  }

  private setFullHeight() {
    // 如果你有元素需要适配窗口高度，直接在模板对应元素上绑定[style.height.px]="windowHeight"即可，无需手动操作DOM
    // 示例：<div class="js-fullheight" [style.height.px]="windowHeight"></div>
  }
}

补充说明 #

• 原逻辑中的jQuery操作全部替换为Angular的声明式绑定，不需要手动查询DOM，符合Angular开发规范
• 高度适配逻辑无需通过类名批量修改元素样式，直接在需要适配高度的元素上绑定样式属性即可，维护性更高
• 侧边栏切换完全通过状态变量控制，没有多余的DOM操作，性能更优

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