Обработка событий клика родительских и дочерних элементов в Angular5

Question

В Angular5,

У меня есть код как показано ниже.

   <div (click)="abc()">
    some content
    <button (click)="xyz()">Click</button>
    </div>

Всякий раз, когда я нажимаю на кнопку, оба метода вызывают. Но я хочу вызвать один метод. Он принадлежит нажатию кнопки.

Как справиться с этим в Angular5

Спасибо

Answer 1

Вам необходимо остановить распространение события в методе xyz:

таким образом в шаблоне:

<div (click)="abc()">
    some content
    <button (click)="xyz($event)">Click</button>
</div>

В компоненте

xyz = function (event: Event) {
    event.stopPropagation();
    ... // rest of the stuff 
}