Angular 2: прекратить распространение события родительского элемента при нажатии на ссылку

У меня есть случай барботирования событий. Пример:

<td (click)="doSomething()">
  <text [innerHtml]="content"> 
        //  content of innerHtml is :  <a href="#" onclick="location.href='http://google.com'; return false;"></a>
  </text>
</td>

Тег передается из другого компонента через innerHtml. Проблема: когда я нажимаю на ссылку, запускается событие click элемента. Как решить проблему (прекратите распространение doSomething()), зная, что обработчики событий (или любой код angular 2) не могут быть переданы через innerHtml?

Спасибо!

Ответ 1

Обходной путь может просто разместить компонент (click)="$event.stopPropagation()" поверх text, чтобы событие не получило пузырьков от хостингового компонента. То же самое можно импровизировать, написав Directive.

<td (click)="doSomething()">
  <text (click)="$event.stopPropagation()" [innerHtml]="content"> 
        //  content of innerHtml is :  <a href="http://google.com"></a>
  </text>
</td>

Ответ 2

Вы можете воспользоваться пузырьками. Из вашего обработчика вы можете посмотреть event.target, чтобы увидеть, было ли нажато A, и если да, пропустите действие.

Будьте осторожны, потому что event.target может быть SPAN! Вам нужно не просто проверить, является ли цель события тегом A, но также и подойти к дереву DOM в простой симуляции пузырьков.

Итак, это возможное решение:

шаблон

(click)="doSomething($event)"

компонент

export class AppComponent {
  content = '<a href="http://google.com">Link text <span>Nested text</span></a>'

  doSomething(e) {
    let target = e.target;

    while (target !== e.currentTarget) {
      if (target.tagName == 'A') return;
      target = target.parentNode;
    }

    alert('do something')
  }
}

Пример плунжера

Ответ 3

Вы можете использовать объект $event как показано ниже:

<a (click)="stopPropagation($event);false"     //<<<----added click event
    href="#" onclick="location.href='http://google.com'; return false;">
</a>

stopPropagation(event: Event){
    event.stopPropagation();
    ...
}