Angular 4確認指令

Question

我正在嘗試在Angular 4中爲jQuery Confirm創建一個指令。但是，我很難停止綁定的事件發生。這裏是我的結構：

menus.component.html：

<a (click)="delete(menu)" class="btn" confirm><i class="icon-trash"></i></a> 

menus.component.ts：

delete(menu: Menu): void { 
    this.menuService.delete(menu.id) 
     .subscribe(
      error => this.errorMessage = <any>error); 
} 

confirm.directive.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; 
     }); 
    } 
} 

確認框確實出現，但事件在它之前被觸發，所以它沒用。我希望這個指令能夠阻止一個事件的發生，如果這個動作被確認了就會觸發它，否則就取消它。

Answer 1

實際上，你可以結合指令名和輸出在一起。

<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() 
    } 
    }); 
} 
} 

Answer 2

我會解決它是這樣的：

@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:() => {} 
     } 
    }); 
    } 

} 

你的HTML應該是這樣的：

<a (confirm-click)="delete(menu)" class="btn" confirm>Delete</a> 

Plunker Example