如何在Angular中实现点击STOP按钮为模态框添加active类的功能

实现方案 #

你可以通过Angular数据驱动视图的特性，用状态变量控制类的动态绑定，完全不需要原生DOM操作，符合Angular开发规范： #

第一步：修改组件TS文件

• 删除原生DOM选择代码 modal = document.querySelector('.modalbox');
• 新增控制模态框显示状态的布尔变量
• 修改stopTimer方法，仅需更新状态变量即可触发视图更新
  修改后的完整TS代码：

import { Component, OnInit } from '@angular/core';
import { timer } from 'rxjs';
@Component({
  selector: 'app-timer',
  templateUrl: './timer.component.html',
  styleUrls: ['./timer.component.css'],
})
export class TimerComponent implements OnInit {
  ngOnInit() {}
  time: number = 0;
  display: string | undefined;
  interval: any;
  // 新增模态框状态变量，初始为隐藏状态
  isModalVisible = false;

  startTimer() {
    console.log('go');
    this.interval = setInterval(() => {
      this.time++;
      this.display = this.transform(this.time);
    }, 1000);
  }
  transform(value: number): string {
    const sec_num = value;
    const hours = Math.floor(sec_num / 3600);
    const minutes = Math.floor((sec_num - hours * 3600) / 60);
    const seconds = sec_num - hours * 3600 - minutes * 60;
    // 这里优化了补0逻辑，可按需保留
    return `${hours}:${minutes.toString().padStart(2,'0')}:${seconds.toString().padStart(2,'0')}`;
  }
  pauseTimer() {
    clearInterval(this.interval);
  }
  stopTimer() {
    clearInterval(this.interval);
    // 若需要停止后重置计时可打开下方注释
    // this.time = 0;
    // this.display = this.transform(this.time);
    // 更新状态变量触发类绑定更新
    this.isModalVisible = true;
    console.log('show');
  }
}

第二步：修改HTML模板

使用Angular的[ngClass]语法，动态给modalbox绑定active类：

<!-- 仅需修改modalbox这一行的类绑定逻辑，其余代码保持不变 -->
<div class="modalbox" [ngClass]="{'active': isModalVisible}">
  <div class="modal">
    <p>What did you do?</p>
    <input type="text" />
    <button>OK</button>
  </div>
</div>
<div class="box">
  <div class="containerUp">
    <button id="start" (click)="startTimer()">START</button>
    <button id="pause" (click)="pauseTimer()">PAUSE</button>
    <button id="stop" (click)="stopTimer()">STOP</button>
  </div>
  <div class="containerDown">
    <p>{{ display }}</p>
  </div>
</div>

补充说明

如果后续需要点击模态框的OK按钮隐藏模态框，只需要给OK按钮绑定点击事件，在事件逻辑里把isModalVisible设为false即可。

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