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()" />
