Angular 2 防止子组件点击路由器导航

Question

I have a template

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

and in my component here is the handler

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

I wanted do nothing on checkbox click but to route on div click.

The above solution is not working.

Answer 1

First argument of navigate function has to be an array

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

OR

you can use navigateByUrl ,

this.router.navigateByUrl('path');

Since you are using $event.stopPropagation() when you click on the checkbox, navigation won't happen but when you simply click on the div, you will be navigated to expected route.

Answer 2

This setup works for me:

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

...

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

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

Important to note:
MatCheckboxChange event type does not have a stopPropagation() function so your example code should actually display an error in the console.
So you want the stopPropagation() only on the checkbox click.

Answer 3

I figured out I have a label that wraps the checkbox. So, I needed to add the click event to stop propagation at the label element