javascript - Angular 2阻止子组件单击时的路由器导航

Question

我有一个模板

<div (click)="handler()">
  <input type='checkbox' (click)="$event.stopPropagation()" (change)="$event.stopPropagation()">
</div>

在我的组件中，这里是处理程序

handler() {
  this.router.navigate('path');
}

我想在复选框单击时什么也不做，而是在 div 单击时路由。

上述解决方案不起作用。

Answer 1

此设置对我有用：

<div (click)="onDivClick()">
  <mat-checkbox (click)="$event.stopPropagation()" (change)="onCheckboxChange($event)"></mat-checkbox>
</div>

...

onDivClick() {
  console.log('div clicked');
}

onCheckboxChange(event) {
  console.log(event);
}

需要注意的重要一点：
MatCheckboxChange事件类型没有stopPropagation()函数，因此您的示例代码实际上应该在控制台中显示错误。
因此，您stopPropagation()只希望在复选框上单击。

Answer 2

我发现我有一个包装复选框的标签。所以，我需要添加点击事件来停止标签元素的传播

Answer 3

导航函数的第一个参数必须是一个数组

this.router.navigate(['path']);

或者

您可以使用navigateByUrl，

this.router.navigateByUrl('path');

由于您$event.stopPropagation()在单击复选框时正在使用，因此不会发生导航，但是当您只需单击 div 时，您将被导航到预期的路线。