单击后如何使按钮保持“按下”状态答案

【问题标题】：How do I make a button stay "Pressed" after clicking单击后如何使按钮保持“按下”状态
【发布时间】：2019-10-04 05:15:44
【问题描述】：

我需要代码

单击时我需要一个按钮，该按钮将保持按下状态。

有时我感到很尴尬，因为我似乎被这些最琐碎的事情绊倒了，我非常感谢这个社区的帮助任何推动我前进的答案总是值得感谢！

谢谢！！ :)

【问题讨论】：

请发布您尝试过的任何代码。
"我需要代码" 那么你来错地方了。请参阅help center。

标签： html css angular typescript bootstrap-modal

【解决方案1】：

我的建议（需要使用指令）

--html

button.component.html

<button  class="btn btn-danger" style="width: 110px" appButton"
         ></button>

--打字稿

button.directive.ts

@Directive({
  selector: '[appButton]'
})
export class ButtonDirective implements OnInit {

  constructor(private elRef: ElementRef, private renderer: Renderer2) {

  }

  ngOnInit() {
  }

@HostListener('mousedown') onmousedown(eventData: Event) {
   if (this.elRef.nativeElement.style.backgroundColor === 'blue') {
     this.renderer.setStyle(this.elRef.nativeElement, 'background-color', 'rgba(200,0,0,0.7)');
   } else {
     this.renderer.setStyle(this.elRef.nativeElement, 'background-color', 'blue');

   }

}

【讨论】：

【解决方案2】：

我会尝试通过设置按钮样式来实现这一点。

例如：

<input type="button" style="border-style:inset;" />

这种边框类型应该让您的按钮看起来像是被不断按下。

【讨论】：

【解决方案3】：

HTML

<button id="myBtn" onclick="changeText()" [disabled]="disabled" >{{buttonText}}</button>

比较

buttonText = "Press Here"
disabled = false

changeText() { 
    const button = document.getElementById('myBtn');
    if (button.classList.contains('pressed') { 
        return;
    } else {
        this.buttonText = "Pressed";
        button.classList.add('pressed');
        this.disabled = true;
    }
}

CSS

.pressed {
    background: "something darker then your unclicked button background color"
}

【讨论】：