Angular 2中如何获取div内所有元素引用并切换类？

我来帮你搞定Angular里的实现思路，还有过渡效果的处理，比jQuery的写法更贴合Angular的组件化和响应式风格~

一、获取子元素并切换类的几种Angular方案 #

方案1：通过@ViewChildren操作DOM（类似jQuery的DOM操作思路） #

如果你习惯直接操作DOM元素，可以用@ViewChildren获取所有目标元素的引用，然后遍历切换类：

首先在模板里给每个<some-element>加上模板引用变量：

<div>
  <some-element #hawkElement class="hawk"></some-element>
  <some-element #hawkElement class="hawk"></some-element>
  <!-- 剩下的8个元素同样加上#hawkElement -->
</div>
<div class="trigger" (click)="detach()">Detach</div>

然后在组件类里导入相关依赖并实现detach方法：

import { Component, ViewChildren, ElementRef, QueryList } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss']
})
export class YourComponentComponent {
  @ViewChildren('hawkElement') hawkElements!: QueryList<ElementRef>;

  detach() {
    this.hawkElements.forEach(element => {
      element.nativeElement.classList.toggle('mock');
    });
  }
}

方案2：响应式状态管理（Angular推荐的最佳实践） #

这种方法不需要直接操作DOM，而是通过组件状态来控制类的切换，更符合Angular的响应式理念：

组件类里定义一个状态数组，用来记录每个元素的mock类状态：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss']
})
export class YourComponentComponent {
  // 初始化10个元素的状态都为false（即默认不加mock类）
  isMockedArray: boolean[] = Array(10).fill(false);

  detach() {
    // 点击时切换所有元素的状态
    this.isMockedArray = this.isMockedArray.map(status => !status);
  }
}

模板里用[ngClass]绑定状态：

<div>
  <some-element 
    class="hawk"
    *ngFor="let isMocked of isMockedArray; index as i"
    [ngClass]="{ mock: isMocked }"
  ></some-element>
</div>
<div class="trigger" (click)="detach()">Detach</div>

二、添加过渡效果（两种实现方式） #

方式1：纯CSS过渡（最简单高效） #

不需要额外的Angular代码，直接在SCSS里给.hawk类加上过渡属性即可：

.hawk {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 10px;
  line-height: 12px;
  cursor: pointer;
  /* 添加上border-radius的过渡动画 */
  transition: border-radius 0.3s ease;

  &.mock {
    border-radius: 0px;
  }
}

这样切换mock类时，border-radius会平滑过渡，效果自然。

方式2：Angular动画（适合复杂动画场景） #

如果需要更复杂的动画逻辑（比如结合其他属性变化、动画序列），可以用Angular的动画模块：

首先确保在根模块导入BrowserAnimationsModule：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [BrowserAnimationsModule]
})
export class AppModule { }

然后在组件里定义动画并绑定状态：

import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss'],
  animations: [
    trigger('borderRadiusAnimation', [
      // 定义两种状态对应的样式
      state('normal', style({ borderRadius: '10px' })),
      state('mock', style({ borderRadius: '0px' })),
      // 状态切换时的过渡动画
      transition('normal <=> mock', animate('300ms ease-in-out'))
    ])
  ]
})
export class YourComponentComponent {
  isMockedArray: boolean[] = Array(10).fill(false);

  detach() {
    this.isMockedArray = this.isMockedArray.map(status => !status);
  }
}

模板里绑定动画触发器：

<div>
  <some-element 
    class="hawk"
    *ngFor="let isMocked of isMockedArray; index as i"
    [@borderRadiusAnimation]="isMocked ? 'mock' : 'normal'"
  ></some-element>
</div>
<div class="trigger" (click)="detach()">Detach</div>

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