通过抓取ElementRef:angular2禁用按钮

我试图在单击按钮时禁用它。通过单击，我正在调用一个函数，我想禁用使用该函数的按钮。如何使用ElementRef访问按钮的属性并禁用它？我不太熟悉如何使用ElementRef。

---

任何帮助都将不胜感激

如果确实希望通过ElementRef禁用按钮，可以使用该方法获取对按钮的引用，然后使用其

nativeElement

属性将按钮设置为禁用

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;
  }
}

从'@angular/core'导入{Component，ViewChild}；
@组成部分({
选择器：“我的应用程序”，
模板：`我的第一个Angular 2应用程序
点击我`
})
导出类AppComponent{
@ViewChild（“myButton”）按钮；
onClicked（）{
this.button.nativeElement.disabled=true；
}
}

---

然而。您所希望的功能可以通过以下方式实现

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
模板：`我的第一个Angular 2应用程序
点击我`
})
导出类AppComponent{
private isDisabled=false；
onClicked（）{
this.isDisabled=true；
}
}

还有一个例子：

点击我@Michael，谢谢你的回复。对于属性绑定方法，我已经在执行类似于[disabled]=“！form.valid”（“[disabled]”的操作，正在忙于检查表单的有效性，因此我无法使用[disabled]向中写入另一个变量。如果您对此有任何建议，请告诉我。您可以使用逻辑AND/OR运算符将多个条件连接起来，例如：
[disabled]=“！form.valid | | isDisabled"
。当然，这完全有效！另一个问题，如果我在一个完全独立的组件中运行其他功能时想禁用此按钮，该怎么办？@SaranshAhlawat您必须使用。但是，处理此问题的方法有很多，它更适合自己的问题。如果这回答了您的问题，请标记答案已接受（绿色勾选）。
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;
  }
}