通过抓取ElementRef来禁用按钮:angular2 [英] Disabling a button by grabbing ElementRef: angular2

问题描述

我试图在单击按钮时禁用它.通过单击，我正在调用一个函数，并且我想使用该函数禁用该按钮.如何使用ElementRef访问按钮的属性并将其禁用?我对如何使用ElementRef不太熟悉. 任何帮助将不胜感激！

I'm trying to disable a button when it is clicked. By clicking I'm calling a function and I want to disable the button using that function. How can I access button's property with ElementRef and disable it? I'm not very familiar with how to use ElementRef. Any help would be greatly appreciated!

推荐答案

如果您确实想通过ElementRef禁用按钮，则可以使用

If you really wanted to disable the button via an ElementRef, you can use the ViewChild method to get a reference to your button and then set the button to disabled using its nativeElement property.

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

@Component({
  selector: 'my-app',
  template: `<h1>My First Angular 2 App</h1>
             <button #myButton (click)="onClicked()">Click me!</button>`
})
export class AppComponent {
  @ViewChild('myButton') button;

  onClicked() {
    this.button.nativeElement.disabled = true;
  }
}

---

但是， Angular2建议使用ElementRef作为最后的手段.您可以通过属性绑定来实现所需的功能.

---

However, Angular2 recommends using ElementRef's as a last resort. The same functionality you desire can be achieved through property binding.

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

@Component({
  selector: 'my-app',
  template: `<h1>My First Angular 2 App</h1>
             <button [disabled]="isDisabled" (click)="onClicked()">Click me!</button>`
})
export class AppComponent {
  private isDisabled = false;

  onClicked() {
    this.isDisabled = true;
  }
}

这篇关于通过抓取ElementRef来禁用按钮:angular2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！