2 앵귤러 2 : 링크를 클릭 할 때 상위 요소의 이벤트 전파가 중단됩니다.

Question

이벤트 버블 링이 발생합니다. 예 :

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

태그는 innerHtml을 통해 다른 구성 요소에서 렌더링됩니다. 문제 : 링크를 클릭하면 요소의 click 이벤트도 발생합니다. 문제를 해결하는 방법 (doSomething() 전파를 막음), innerHtml을 통해 이벤트 처리기 (또는 임의의 각도 2 코드)를 전달할 수 없다는 것을 알고 있습니까?

감사합니다. 해당 이벤트가 구성 요소를 호스팅에서 나왔을되지 않도록

Answer 1

해결, 단순히 text 구성 요소 위에 (click)="$event.stopPropagation()"을 배치 할 수 있습니다. 똑같은 것은 Directive을 작성하여 즉석에서 할 수 있습니다.

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

Answer 2

당신은 당신은 버블 링을 활용할 수 $ 이벤트를 아래와 같이 객체,

<a (click)="stopPorpagation($event);false"  //<<<----added click event 
    href="http://google.com"> 
</a> 

stopPorpagation(event:any){ 
    event.stopPropagation(); 
    .... 
} 

Answer 3

를 사용할 수 있습니다. 핸들러에서 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') 
    } 
} 

Plunker Example