停止点击的指令不起作用 Angular 2

Question

当使用HostListener单击事件并尝试停止该事件的传播时，实际元素上的单击处理程序仍然会触发。

这是相关代码和 stackblitz 的示例。

// Directive
@Directive({
  selector: '[appDirective]'
})
export class AppDirective {
  @HostListener('click', ['$event']) onClick($event: Event) {
    $event.preventDefault();
    $event.stopPropagation();
    alert('i tried to prevent this...');
  }
}

// HTML
<button (click)="doSomething()" appDirective>Click Me</button>

// Click handler
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 6';

  doSomething() {
    alert('I was not prevented.');
  }
}

难道我做错了什么？

https://angular-nufbqg.stackblitz.io

Answer 1

你错了，你的代码确实有效。

1. button没有类型的默认操作是什么？没有什么！所调用的方法(click)不是浏览器的默认操作。
2. 您正试图阻止传播吗？DOM链之上没有点击事件的监听器，同一个元素中有一个处理程序。所以停止传播是没有用的。

您可以根据您的要求解决您的问题。比如说，您必须在单击按钮时提交表单。然后submit按钮类型的默认操作是提交表单。preventDefault()将在那里工作。

<form (ngSubmit)="doSomething()">
  <button type="submit" appDirective>Click Me</button>
</form>


export class AppDirective {
  @HostListener('click', ['$event']) onClick($event: Event) {
    console.log("host listener called"); // will be called
    $event.preventDefault();
  }
}


doSomething() {
   console.log("do Something called");   // won't be called
}

https://stackblitz.com/edit/angular-kdajrk