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