Angular2 Директива для изменения обработки кликов

Question

Я пытаюсь написать директива атрибута Angular2, чтобы изменить поведение некоторых элементов. Более конкретно, я хочу применить атрибут к определенным элементам, которые имеют обработчики кликов и предотвращают выполнение связанной функции при определенных условиях.

Так что теперь у меня есть элемент т.д .:

<button (click)="onClick(param1, param2)"></button> 

OnClick является функцией, объявленной на компонент, который размещен элемент кнопки делает некоторую работу.

То, что я хотел бы сделать, это написать что-то вроде:

<button (click)="onClick(param1, param2)" online-only></button> 

и есть директива, как:

@Directive({ 
    selector: '[online-only]', 
}) 
export class OnlineOnlyDirective { 
    @HostListener('click', ['$event']) 
    onClick(e) { 
    if(someCondition){ 
     e.preventDefault(); 
     e.stopPropagation(); 
    } 
    } 
} 

Но нажми обработчик выполняется первым, таким образом, не давая свою директиву возможности остановить его выполнение.

Второй подход, который я думал о замене (щелчок) моим собственным обработчиком, например ([онлайнClick] = "onClick") и выполнить переданную функцию, когда директива считает нужным, но таким образом я не могу передать параметры функции onClick и немного страннее смотреть.

У вас есть мысли по поводу чего-то подобного?

Answer 1

Я не знаю, как заставить заставить Angular выполнить определенный обработчик событий. Обходной может быть использовать пользовательское событие, как:

<button (myClick)="onClick(param1, param2)" online-only></button> 

@Directive({ 
    selector: '[myClick]', 
}) 
export class OnlineOnlyDirective { 
    @Output() myClick: EventEmitter = new EventEmitter(); 
    @HostListener('click', ['$event']) 
    onClick(e) { 
    if(someCondition){ 
     e.preventDefault(); 
     e.stopPropagation(); 
    } else { 
     this.myClick.next(e); 
    } 
    } 
} 

Answer 2

До сих пор это не возможно, таким образом, вы хотели, чтобы сделать это (используя только (щелчок) связывание). Это связано с тем, что все события, зарегистрированные посредством привязки Angular -> by (click), @HostListner, проксируются через один прослушиватель. Вот почему вызов stopPropagation или более правильно в этом случае stopImmediatePropagation не работает, так как у вас больше нет отдельных прослушивателей событий. Пожалуйста, обратитесь к этой проблеме за более подробной информацией: https://github.com/angular/angular/issues/9587.