如何将Jquery折叠图标切换函数改写为Angular 4实现？

嘿，作为Angular 4新手，把jQuery的DOM操作转成Angular风格确实得换个思路——毕竟Angular更推崇数据驱动视图，而不是直接去摆弄DOM元素。我给你两种可行的方案，优先推荐第一种更符合Angular理念的方式：

方案一：使用ng-bootstrap组件（推荐） #

Angular生态里有官方维护的ng-bootstrap库，它把Bootstrap的组件封装成了Angular组件，完全不需要依赖jQuery，完美契合Angular的开发模式。

步骤1：安装依赖（如果还没装） #

先在项目里安装ng-bootstrap和Bootstrap：

npm install @ng-bootstrap/ng-bootstrap bootstrap

然后在你的AppModule里导入NgbModule：

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [
    // 其他你已经导入的模块，比如BrowserModule等
    NgbModule
  ]
})
export class AppModule { }

步骤2：组件模板与代码 #

在你的组件模板里，我们用一个布尔变量来跟踪折叠状态，然后通过[ngClass]来动态切换Font Awesome的图标类：

<div class="collapse-group">
  <!-- 触发折叠的按钮，点击切换状态 -->
  <button (click)="isCollapsed = !isCollapsed" class="btn btn-link">
    <i 
      class="fa" 
      [ngClass]="{
        'fa-caret-down': isCollapsed,
        'fa-caret-up': !isCollapsed
      }"
    ></i>
    点击展开/折叠内容
  </button>
  <!-- ng-bootstrap的折叠组件，绑定状态变量 -->
  <div [ngbCollapse]="isCollapsed">
    <!-- 这里放你要折叠的内容 -->
    <div class="card card-body">
      这是折叠区域的内容，展开时显示，折叠时隐藏~
    </div>
  </div>
</div>

然后在组件类里定义状态变量：

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

@Component({
  selector: 'app-collapse-demo',
  templateUrl: './collapse-demo.component.html'
})
export class CollapseDemoComponent {
  // 初始状态设为折叠，对应fa-caret-down图标
  isCollapsed = true;
}

这种方式完全不需要手动操作DOM，所有状态都由变量控制，Angular会自动帮你更新视图，非常符合Angular的设计思想。

方案二：兼容原有Bootstrap jQuery插件（不推荐） #

如果你的项目已经依赖了Bootstrap的jQuery插件，不想切换到ng-bootstrap，也可以用Angular的ViewChild来获取DOM元素，监听Bootstrap的折叠事件。但这种方式直接操作DOM，不太符合Angular的理念，容易引发变更检测相关的问题，只作为过渡方案：

组件模板 #

<div class="parent-container">
  <button data-toggle="collapse" data-target="#myCollapse">
    <i #collapseIcon class="fa fa-caret-down"></i>
    点击展开/折叠
  </button>
  <div #collapseElement id="myCollapse" class="collapse">
    <div class="card card-body">
      折叠内容区域
    </div>
  </div>
</div>

组件类代码 #

import { Component, ViewChild, ElementRef, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-native-collapse',
  templateUrl: './native-collapse.component.html'
})
export class NativeCollapseComponent implements OnInit, OnDestroy {
  @ViewChild('collapseIcon') collapseIcon: ElementRef;
  @ViewChild('collapseElement') collapseElement: ElementRef;

  private shownListener: () => void;
  private hiddenListener: () => void;

  ngOnInit() {
    const collapseEl = this.collapseElement.nativeElement;
    // 监听Bootstrap的shown事件，切换图标
    this.shownListener = () => {
      this.collapseIcon.nativeElement.classList.remove('fa-caret-down');
      this.collapseIcon.nativeElement.classList.add('fa-caret-up');
    };
    collapseEl.addEventListener('shown.bs.collapse', this.shownListener);

    // 监听Bootstrap的hidden事件，切换图标
    this.hiddenListener = () => {
      this.collapseIcon.nativeElement.classList.remove('fa-caret-up');
      this.collapseIcon.nativeElement.classList.add('fa-caret-down');
    };
    collapseEl.addEventListener('hidden.bs.collapse', this.hiddenListener);
  }

  // 组件销毁时移除事件监听，避免内存泄漏
  ngOnDestroy() {
    const collapseEl = this.collapseElement.nativeElement;
    collapseEl.removeEventListener('shown.bs.collapse', this.shownListener);
    collapseEl.removeEventListener('hidden.bs.collapse', this.hiddenListener);
  }
}

注意事项 #

这种方式需要确保你的项目已经正确引入了jQuery和Bootstrap的JS文件，而且要注意在组件销毁时移除事件监听，防止内存泄漏。

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