Angular 2 запретить нажимать на родителя при нажатии на дочерний элемент

У меня есть событие click, вложенное на один уровень. Когда я нажимаю на дочерний элемент, вызывается ожидаемая функция, но также вызывается родительская функция. Вот код

<li class="task-item" *ngFor="let task of tasks" (click)="showTask(task.name)">
    <input type="checkbox" [ngModel]="task.taskStatus" (ngModelChange)="changeTaskStatus($event)" />
</li>

Поэтому, когда флажок изменяет changeTaskStatus() и showTask(), вызовет вместе. Я хочу, чтобы родитель молчал при изменении флажка. Как мне это достичь? С этим легко справиться в Angular 1

Вещи, которые я пробовал, не удалось

Используется $event.stopPropagation() в событии клика флажка, который ничего не изменил

<input type="checkbox" [ngModel]="task.taskStatus" (click)="$event.stopPropagation()" (ngModelChange)="changeTaskStatus($event)" />

Ответ 1

Для события флажка нужно использовать stopPropagation():

<input type="checkbox" [ngModel]="task.taskStatus" (ngModelChange)="changeTaskStatus($event);$event.stopPropagation()" />

Это предотвращает дальнейшее распространение текущего события на этапах захвата и барботации. Вы можете прочитать здесь здесь. Кроме того, вам, вероятно, нужно добавить флажок stopPropagation() в click, но я не уверен на 100%:

<input type="checkbox" [ngModel]="task.taskStatus" (click)="$event.stopPropagation()" (ngModelChange)="changeTaskStatus($event)" />

Ответ 2

<input (input)=$event.stopPropagation()" />