Отключение кнопки путем захвата 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; 
    } 
}