Angular2：如何為調用異步方法的按鈕創建加載指令？

Question

我想創建一個按鈕/鏈接的指令，以便在單擊時通過加載器替換其內部文本，並在調用成功或失敗時重新設置其內部文本。

我是這樣開始的：

HTML：

<button (click)="update()" asyncLoader >Update</button> 

指令：

import {
  Directive,
  Input,
  ElementRef,
  AfterViewInit,
  Output,
  EventEmitter,
  HostListener,
} from '@angular/core';


@Directive({
  selector: '[asyncLoader]'
})
export class ActionAsyncLoader {

  text: string;
  // @Output() valueChanged = new EventEmitter();

  constructor(private elementRef: ElementRef) {
  }

  ngOnInit(){
    this.text = this.elementRef.nativeElement.innerHTML;
    // console.log('this.text', this.text);
  }

  @HostListener('click', ['$event.target']) onClick(btn) {
    console.log('click async btn', btn);
    btn.innerHTML = 'Loading';
  }
}

這里點擊的元素用'Loading'替換它的文本。

問題：由於異步方法是在組件中設置的，如何從這里收聽回調？

Answer 1

現在，我只是在成功時發出一個事件而失敗，然后在指令中對它進行控制......我在指令中傳遞一個輸入以確保它與回調相匹配。

HTML：

<button (click)="update()" asyncLoader='updateXYZ' >Update</button> 

指令：

@Directive({
  selector: '[asyncLoader]'
})
export class ActionAsyncLoader {

  @Input('asyncLoader') asyncLoader: string;
  text: string;
  // @Output() valueChanged = new EventEmitter();

  constructor(private elementRef: ElementRef,
              private eventsService: EventsService) {
    eventsService.onCallbackAsync.subscribe(obj => this.onCallbackAsync(obj));
  }

  ngOnInit(){
    this.text = this.elementRef.nativeElement.innerHTML;
  }

  @HostListener('click', ['$event.target']) onClick(btn) {
    btn.innerHTML = 'Loading';
  }

  onCallbackAsync(obj){
    console.log('onCallbackAsync', obj);
    // check if directive matches the callback event
    if (this.asyncLoader === obj.asyncLoader){
      this.elementRef.nativeElement.innerHTML = this.text;
    }
  }
}