通过抓取 ElementRef: angular2 禁用按钮答案

【问题标题】：Disabling a button by grabbing ElementRef: angular2通过抓取 ElementRef: angular2 禁用按钮
【发布时间】：2016-06-26 05:51:25
【问题描述】：

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

【问题讨论】：

标签： angular angular2-template

【解决方案1】：

如果您真的想通过 ElementRef 禁用按钮，可以使用 ViewChild 方法获取对按钮的引用，然后使用其 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;
  }
}

但是，Angular2 recommends using ElementRef's as a last resort。通过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;
  }
}

【讨论】：

再举一个例子：<button #btn (click)="btn.disabled = true">Click me!</button>
@Michael，感谢您的回复。对于属性绑定方法，我已经在做类似 [disabled]="!form.valid" 的事情（'[disabled]' 已经忙于检查表单的有效性，所以我不能用 [disabled] 写入另一个变量. 如果您对此有任何建议，请告诉我。
您可以使用逻辑 AND/OR 运算符连接多个条件，如下所示：[disabled]="!form.valid || isDisabled"。
当然，这完全有效！另一个问题，如果我想在完全独立的组件中运行其他功能时禁用此按钮怎么办？
@SaranshAhlawat 你必须使用component interaction。然而，有很多方法可以处理这个问题，它会更适合它自己的问题。如果这回答了您的问题，请将答案标记为已接受（绿色勾号）。