Angular - Получить выражение привязки щелчка элемента - PullRequest
Новая
       35

Angular - Получить выражение привязки щелчка элемента

0 голосов
/ 23 ноября 2018

Учитывая следующую разметку: 

<button class="btn" (click)="chain()" promiseDirective></button>

И предполагая, что мой метод chain() возвращает обещание, я хотел бы получить значение выражения для привязки click, чтобы я мог получить к нему доступ в моемдиректива: 

@Directive({
  selector: '[promiseDirective]'
})
export class PlPromisesDirective implements OnInit {
  @Input() promiseDirective: any;
  @Input() click: any; // Maybe get the value through here

  private subject: Subject<any>;
  private subscription: Subscription;

  constructor() {
    this.subject = new Subject<any>();
  }

  public ngOnInit(): void {
    this.subscription = this.subject
      .asObservable()
      .pipe(map(value => Promise.resolve<any>(value)))
      .subscribe(value => this.promiseHandler(value, this.$element));
  }

  @HostListener('click', ['$event'])
  public clickEventHandler(event: MouseEvent) {
    // And maybe access it here
    console.log(value);
  }
}

Я пытался связать свойство click, но значение всегда приходит как undefined.

Редактировать

Хотя ответ @selem mn является удовлетворительным, я бы хотел избежать необходимости во второй привязке для обнаружения изменения значения, поскольку это уже возможно с помощью привязки @Input() plPromise.

Что мне действительно нужно, так это способ непосредственно прослушать результат выражения (click), чтобы я мог сделать использование директив более практичным.

1 Ответ

0 голосов
/ 23 ноября 2018

Первый способ

Я думаю, если вы зависите от этого значения в вашей директиве, тогда следует реализовать метод там: 

@Directive({
  selector: 'button[promiseDirective]'
})
 // ....
 @HostListener('click', ['$event'])
  public clickEventHandler(event: MouseEvent) {
    // Call your service here
  }

И удалить это (click) из вашего тега кнопкипоскольку ваша директива сама обрабатывает события кликов с помощью @HostListener: 

<button class="btn" promiseDirective></button>

Второй способ:

Или вы можете добавить еще один @Input без изменения ядра вашего методатам означает: 

@Directive({
  selector: 'button[promiseDirective]'
})

@Input() valueOfPromise;
 // ....
 ngOnChanges() // <-- would be invoked once @Input() value is updated
    console.log(this.valueOfPromise);    
  }

Не забудьте импортировать и реализовать интерфейс OnChanges в своем классе директивы, тогда ваш фрагмент кода должен выглядеть следующим образом: 

<button [valueOfPromise]="returnedValue" (click)="chain()" class="btn" promiseDirective></button>

И для соответствующегоTS часть кнопки: 

public returnedValue;

chain() {
 // Call your service
   this.returnedValue = data // <-- data is your returned data from service
}

Здесь вам больше не нужно @HostListener.

...