イベントバブリングのケースがあります。例:
<td (click)="doSomething()">
<text [innerHtml]="content">
// content of innerHtml is : <a href="http://google.com"></a>
</text>
</td>
タグは、innerHtmlを介して別のコンポーネントからレンダリングされます。問題:リンクをクリックすると、要素のクリックイベントも発生します。問題を解決する方法(doSomething()の伝播を停止する)、イベントハンドラ(または任意のangular 2 code)がinnerHtmlを通過できないことを知っていますか?
ありがとうございました!
回避策は単に(click)="$event.stopPropagation()"
over text
コンポーネント。そのため、イベントはホスティングコンポーネントからバブルアップされません。 Directive
を書くことで同じことが即興でできます。
<td (click)="doSomething()">
<text (click)="$event.stopPropagation()" [innerHtml]="content">
// content of innerHtml is : <a href="http://google.com"></a>
</text>
</td>
バブリングを利用できます。ハンドラーから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')
}
}
以下のように$event
オブジェクトを使用できます。
<a (click)="stopPropagation($event);false" //<<<----added click event
href="http://google.com">
</a>
stopPropagation(event: Event){
event.stopPropagation();
...
}