Как я могу создать HostListener в директиве для nativescript? - PullRequest
Новая
       175

Как я могу создать HostListener в директиве для nativescript?

0 голосов
/ 04 августа 2020

Прямо сейчас я пытаюсь создать директиву для добавления ко всем моим кнопкам, где кнопка отключается при нажатии. Я могу создать это, создав событие касания для всех моих кнопок индивидуально в каждом компоненте, но это неэффективное использование кода. Я создал директиву angular для отключения кнопок, однако она не переводится на Nativescript. Вот что я сделал: 

  selector: '[appPreventDoubleClick]',
})
export class PreventDoubleClickDirective {

  constructor(private elementRef: ElementRef) { }

  @HostListener('click') clickEvent() {
    this.elementRef.nativeElement.setAttribute('disabled', true);
    setTimeout(() => {
      this.elementRef.nativeElement.removeAttribute('disabled');
    }, 1000);
  }

Затем на каждой кнопке html я добавляю директиву: appPreventDoubleClick

То же самое с Nativescript не работает, так как добавление директивы без контейнера и шаблона кнопки исчезают. Когда я добавляю их, кнопки возвращаются, однако я не уверен, где разместить прослушиватель хоста, и должен ли я вообще использовать прослушиватель хоста.

Документация Nativescript показывает, что прослушиватель событий должен быть добавляется непосредственно к объекту кнопки в компоненте, но я не уверен, как это переводится в директиву: https://docs.nativescript.org/core-concepts/events

Любая помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 04 августа 2020

Добавить appPreventDoubleClick в список директив компонента 

@Component({ 

... 

directives: [appPreventDoubleClick] 
})

Попробуйте следующее 

   import {Directive, Input, HostListener, ElementRef} from "@angular/core";

@Directive({
  selector: '[appPreventDoubleClick]'
})
export class PreventDoubleClickDirective {
 

  constructor(private elementRef: ElementRef) { }


  @HostListener('click')
  click() {
    this.elementRef.nativeElement.disabled =true;
    setTimeout(() => {
      this.elementRef.nativeElement.disabled=false;
    }, 1000);
  }
  
}

SampleCode

...