如何使活動類在Angular中作業？

一旦我單擊“STOP”（函式是 stopTimer()），我試圖通過添加“active”類將 z-index 從 -1 更改為 0，但我似乎沒有找到解決方案。我仍然對 Angular 邏輯感到困惑，我想完全實作它而不是使用 JS 邏輯，這是我到目前為止所寫的：

HTML：

<div class="modalbox">
  <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>

CSS：

.modalbox {
  border: solid yellow;
  position: absolute;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: -1;
}

.active {
  z-index: 0;
}

.modal {
  border: solid black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px;
  border-radius: 20px;
  background-color: yellow;
}

.modal p {
  font-size: 40px;
  margin-bottom: 10px;
  font-weight: bold;
}

.modal input {
  font-size: 25px;
}

.modal button {
  margin-top: 20px;
  padding-right: 25px;
  padding-left: 25px;
  padding-top: 5px;
  padding-bottom: 5px;
  cursor: pointer;
}

.box {
  border-right: solid black;
  width: 50%;
  height: 100vh;
}

.containerUp {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  border: solid red;
  height: 50vh;
}
.containerDown {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: right;
  border: solid blue;
  height: 50vh;
  font-size: 100px;
  margin: 0;
  padding: 0;
}

#start {
  color: white;
  padding: 50px;
  background-color: limegreen;
}
#pause {
  color: white;
  padding: 50px;
  background-color: orange;
}
#stop {
  color: white;

  padding: 50px;
  background-color: red;
}
button {
  font-size: 20px;
}

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;
  modal = document.querySelector('.modalbox');

  startTimer() {
    console.log('go');
    this.interval = setInterval(() => {
      if (this.time === 0) {
        this.time  ;
      } else {
        this.time  ;
      }
      this.display = this.transform(this.time);
    }, 1000);
  }
  transform(value: number): string {
    var sec_num = value;
    var hours = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - hours * 3600) / 60);
    var seconds = sec_num - hours * 3600 - minutes * 60;
    return hours   ':'   minutes   ':'   seconds;
  }
  pauseTimer() {
    clearInterval(this.interval);
  }
  stopTimer() {
    this.modal?.classList.add('active');
    console.log('show');
  }
}

uj5u.com熱心網友回復：

這將（可能）不起作用，因為您不能像在 Angular 中那樣使用查詢選擇器。有兩種選擇：

• 使用 ViewChild https://angular.io/api/core/ViewChild
• 使用帶有 Angular 變數系結的 HTML 類屬性https://angular.io/guide/attribute-binding#binding-to-the-class-attribute

HTML：

<div class="modalbox" [class.active]="modalboxActive">
  <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>

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;
  modalboxActive = false;

  // [...]

  stopTimer() {
    this.modalboxActive = true;
    console.log('show');
  }
}

[class.active]="modalboxActive"將active-class 設定為元素，只要變數modalboxActive為真

標籤：html css 有角的 打字稿

上一篇：異步函式的neverthrow有什么意義？

下一篇：如何在反應中定義帶有打字稿的SVG組件？