innerHTML 사용 시 css 깨질 때

string으로 넘어온 html태그들이나 통째로 html 태그들을 받아서 화면에 출력해야 할 때 innerHTML 을 사용하여 그대로 출력하는 방법이 있다.

그런데 innerHTML로 출력할 html에 컴포넌트에 적용된 css들에 영향을 받아 innerHTML에 출력할 부분의 css가 깨지는 경우가 있었다.

이 때 string html을 DomSanitizer.bypassSecurityTrustHtml 이라는 함수를 사용해서 SafeHTML 형태의 데이터로 변환후에 뷰에 출력했을 때 string형 html에 적용된 css 그대로 출력되었다.

DomSanitizer를 의존성 주입을 받고

this.DomSanitizer.bypassSecurityTrustHtml(stringHTML)

이렇게 사용한다.

bypassSecurityTrustHtml 함수로 변환이 된 후엔 SafeHTML이라는 형의 데이터가 된다.