ElementRefをつかんでボタンを無効にする：angular2

Question

ボタンをクリックすると無効にしようとしています。クリックすると、関数が呼び出されています。その関数を使用してボタンを無効にします。 ElementRefでボタンのプロパティにアクセスして無効にするにはどうすればいいですか？私はElementRefの使い方にあまり慣れていません。 ご協力いただければ幸いです！

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