처리기를 기존 HTML에 각도로 연결하는 방법

Question

일부 기존 HTML 문서를 가져 와서 표시하는 각도 응용 프로그램을 작성하고 있습니다.

큰 프레젠테이션 문서 (제 3 자)를 가져 와서 패널에 표시하려면 (innerHtml 바인딩 사용) 서비스를 사용하십시오.

<div class='legal-doc-panel' [innerHtml]='doc'></div> 

예상대로 작동합니다.

내가 작성한 응용 프로그램은 기존 문서를 추가 정보로 보완합니다.

사용자가 "가져온"HTML의 여러 요소를 마우스로 가리거나 클릭하여 별도의 패널에 추가 콘텐츠를 표시 할 때이를 감지하고 싶습니다.

기본적으로 (innerHtml을 통해) 페이지로 가져 와서 응답하는 일부 요소에 대해 마우스 처리기를 연결하고 싶습니다.

이 작업을 수행하는 가장 좋은 방법은 무엇입니까? 제안 사항을 보내 주시면 감사하겠습니다.

Answer 1

Angular는 innerHtml에 넣는 것을 인식하지 못합니다.

<div class='legal-doc-panel' [innerHtml]='doc' (myEvent)="onMyEvent()"></div> 

을 그리고 당신은 EventEmitter와 구성 요소에 할 것 같은 내면의 HTML에 당신은 이벤트를 방출 할 수있다 :하지만 당신은 각도가 알고있는 호스트 요소에서 이벤트를 수신 할 수 있습니다. 이런 식으로 뭔가 :

var event = new CustomEvent("myEvent", { 
    someData: 'foo' 
}); 

hostElement.dispatchEvent(event); 

어쨌든 내가 가장 깨끗한 해결책은 전혀 innerHtml을 사용하지 않는 것이 좋습니다 것입니다. 대신 서버가 JSON을 제공하고 Angular로 html을 빌드 할 수 있습니다.

삽입 된 html에 대해 제어 할 수없는 경우 innerHtml을 삽입 한 후에 component.ts에서 바닐라 JavaScript를 사용할 수 있습니다. div 내에서 요소를 검색하고 일반적인 JavaScript와 마찬가지로 addEventListener()를 사용하면됩니다.