以下是一个示例解决方案,演示了如何在Angular 8中创建一个ng-number-picker组件,该组件在鼠标按下时持续增加计数,并在移开旋转按钮时停止:
首先,创建一个名为number-picker
的组件:
创建一个名为number-picker
的文件夹,并在其中创建以下文件:
number-picker.component.html
:包含模板代码number-picker.component.css
:包含样式代码number-picker.component.ts
:包含组件逻辑代码在number-picker.component.html
中添加以下代码:
number-picker.component.css
中添加以下代码:.number-picker {
display: flex;
align-items: center;
}
.rotate-button {
border: none;
background: none;
cursor: pointer;
padding: 5px;
}
.counter {
width: 50px;
text-align: center;
}
number-picker.component.ts
中添加以下代码:import { Component } from '@angular/core';
@Component({
selector: 'app-number-picker',
templateUrl: './number-picker.component.html',
styleUrls: ['./number-picker.component.css']
})
export class NumberPickerComponent {
count: number = 0;
interval: any;
startCounting(): void {
this.interval = setInterval(() => {
this.count++;
}, 100);
}
stopCounting(): void {
clearInterval(this.interval);
}
}
现在,您可以在其他组件中使用number-picker
组件。只需将
添加到模板中即可。例如:
Number Picker Example
这样,当鼠标在旋转按钮上按下时,计数将开始增加,并在移开按钮时停止增加。