다른 콘텐츠와 innerHTML을 동시에 표시

Question

다음과 같이 전달된 데이터를 기반으로 레이블을 렌더링하는 구성 요소가 있습니다.

으아악

필요할 때 각 텍스트 옆에 아이콘을 렌더링하고 싶습니다.

으아악

각 태그 사이에 아이콘 태그를 넣으면 innerHTML 데이터로 대체됩니다.

아이콘(모든 요소에 아이콘 HTML을 작성하고 싶지 않기 때문에 ng-content 또는 이와 유사한 것을 사용)과 innerHTML 데이터를 렌더링할 수 있는 방법이 있습니까?

저는 Angular 세계가 처음이라 배우려고 노력하고 있습니다. 어떤 도움이라도 대단히 감사하겠습니다.

감사합니다.

Answer 1

귀하의 문제는 Angular에만 국한된 것이 아니라 JavaScript 동작과 관련된 것 같습니다.

innerHTML 요소에 포함된 HTML 또는 XML 태그를 가져오거나 설정합니다. 즉, 처음에 있던 모든 것을 대체한다는 의미입니다. (https://developer.mozilla.org/en-US /docs/Web/API/Element/innerHTML)

대신 insertAdjacentHTML()을 사용해 볼 수도 있을 것 같습니다. 이렇게 하면 이미 DOM에 있는 요소에 HTML이 추가됩니다. 여기에서 구문과 예를 확인하세요: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML