Angular 角度4确认指令

我正试图为Angular 4创建一个指令。然而，我很难阻止绑定事件的发生。以下是我的结构：

menus.component.html:

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

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

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

---

确认框确实出现，但事件在它之前被触发，因此它是无用的。我希望此指令停止触发事件，如果操作被确认，则触发它，否则取消它。

我会像这样处理它：

@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>

---

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

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

删除
@指示({
选择器：“[确认]”
}) 
导出类确认指令{
@Output（）confirm=neweventemitter（）；
构造函数（专用el:ElementRef）{
}
@HostListener（'单击'）
onClick（）{
美元。确认({
按钮：{
确认：（）=>this.confirm.emit（）
}
});
}
}
为什么它没用？因为无论我确认与否，事件总是被触发。OMG Angular 4是否被释放？我在做什么：O:O angular 3在哪里？@RameshRajendran他们跳过了3。而且它现在只是“角度”，当前的稳定版本是v4.0.0。6个月后，它将成为v5.0.0。因为这个.router.navigate（['/menus']）；总是在初始化模式后执行。您应该只在订阅结果中导航（单击smt后）哇，很好的解决方案！谢谢你的帮助，但我们有一个小问题。即使我这样使用它，它也不会运行该函数：@yurzui我给出了警报（1）的示例，只是为了简单起见。我的代码中缺少了一些东西，我不知道是什么，但它不允许您建议的代码工作。请阅读angular2中的模板变量范围。我向component添加了alert as属性，因为我的函数在组件中，我应该将其称为（确认单击）=“menuService.delete（菜单）”还是什么？我的问题仍然没有解决。您代码中的delete（）事件未被激发@Juliacan u请创建一个plunker，这样我就能明白为什么它不起作用了？我创建了一个plunker，但它可以工作lol。我应该重新调试我的代码。很好。让我知道我可以如何帮助你。事实证明，整个问题都是由我过时的jQuery确认库引起的。你的指示很有效，再次感谢。