angular - 停止点击的指令不工作 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. 没有类型的按钮的默认操作是什么？？没有! (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