Angular 2防止在子组件单击时进行路由器导航

Question

我有一个模板

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

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

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

我不想在复选框点击上做任何事情，而是在div点击上路由。

上述解决方案不起作用。

Answer 1

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

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

或

您可以使用navigateByUrl、

this.router.navigateByUrl('path');

由于单击复选框时使用的是$event.stopPropagation()，因此不会进行导航，但只要单击div，就会导航到预期路线。

Answer 2

此设置适用于我：

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

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