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

我会像这样解决这个问题：

@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

Answer 2

您实际上可以将指令名称和输出组合在一起。

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

Angular 4确认指令

2 个答案: