Estoy tratando de crear una directiva para jQuery Confirm en Angular 4. Sin embargo, tengo dificultades para detener los eventos vinculados. Aquí está mi estructura:
menús.componente.html:
<a (click)="delete(menu)" class="btn" confirm><i class="icon-trash"></i></a>menús.componente.ts:
delete(menu: Menu): void { this.menuService.delete(menu.id) .subscribe( error => this.errorMessage = <any>error); }confirmar.directiva.ts:
import {Directive, ElementRef, Input} from '@angular/core'; @Directive({ selector: '[confirm]' }) export class ConfirmDirective { constructor(el: ElementRef) { $(el.nativeElement).on('click', function () { $(this).confirm({ confirm: function () { return true; } }); return false; }); } }Aparece el cuadro de confirmación, pero el evento se activa antes, por lo que es inútil. Quiero que esta directiva detenga la activación de un evento, dispárelo si se confirma la acción, cancélelo de lo contrario.
Yo trabajaría alrededor de esto de esta manera:
@Directive({ selector: '[confirm]' }) export class ConfirmDirective { @Output('confirm-click') click: any = new EventEmitter(); @HostListener('click', ['$event']) clicked(e) { $.confirm({ buttons: { confirm: () => this.click.emit(), cancel: () => {} } }); } }tu html debería verse así:
<a (confirm-click)="delete(menu)" class="btn" confirm>Delete</a>En realidad, puede combinar el nombre de la directiva y la salida.
<button class="btn" (confirm)="delete()">delete</button> @Directive({ selector: '[confirm]' }) export class ConfirmDirective { @Output() confirm = new EventEmitter<any>(); constructor(private el: ElementRef) { } @HostListener('click') onClick() { $.confirm({ buttons: { confirm: () => this.confirm.emit() } }); } }