[angular] 각도 2-innerHTML 스타일링

업데이트 2 ::slotted

::slotted 이제 모든 새 브라우저에서 지원되며 ViewEncapsulation.ShadowDom

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

업데이트 1 :: ng-deep

/deep/ 더 이상 사용되지 않고 ::ng-deep .

::ng-deep 또한 더 이상 사용되지 않음으로 표시되었지만 아직 사용 가능한 교체품이 없습니다.

때 ViewEncapsulation.Native제대로 전체의 그림자 DOM 경계를 스타일링 모든 브라우저 및 지원에 의해 지원됩니다,::ng-deep 아마도 중단됩니다.

실물

Angular는 모든 종류의 CSS 클래스를 HTML에 추가하여 DOM에 추가하여 섀도우 DOM CSS 캡슐화를 에뮬레이트하여 구성 요소의 외부 및 외부에서 피가 나오는 스타일을 방지합니다. 또한 Angular는 추가 한 클래스와 일치하도록 추가 한 CSS를 다시 작성합니다. 를 사용하여 추가 된 HTML의 경우[innerHTML]이러한 클래스를 되지 않으며 다시 작성된 CSS가 일치하지 않습니다.

해결 방법으로

• 컴포넌트에 추가 된 CSS

/* :host /deep/ mySelector { */
:host ::ng-deep mySelector {
  background-color: blue;
}

• CSS 추가 index.html

/* body /deep/ mySelector { */
body ::ng-deep mySelector {
  background-color: green;
}

>>>(동등 /deep/하지만 /deep/SASS에서 더 잘 작동 함) ::shadow2.0.0-beta.10에 추가되었습니다. 이들은 그림자 DOM CSS encapsulation: ViewEncapsulation.Emulated결합기 와 유사하며 더 이상 사용되지 않으며 Angular2의 기본값 과 만 작동 합니다. 그들은 아마도 함께 작동 ViewEncapsulation.None하지만 필요하지 않기 때문에 무시됩니다. 이러한 콤비 네이터는 교차 컴포넌트 스타일링을위한 고급 기능이 지원 될 때까지 중간 솔루션입니다.

다른 접근 방식은

@Component({
  ...
  encapsulation: ViewEncapsulation.None,
})

CSS를 차단하는 모든 구성 요소 (CSS를 추가하는 위치와 스타일을 지정할 HTML의 위치에 따라 다름)- 응용 프로그램의 모든 구성 요소 일 수 있음

최신 정보

플런저 예

답변

import { DomSanitizer } from '@angular/platform-browser';

constructor(private sanitizer: DomSanitizer){}

transformYourHtml(htmlTextWithStyle) {
    return this.sanitizer.bypassSecurityTrustHtml(htmlTextWithStyle);
}

// inside component class...

constructor(private hostRef: ElementRef) { }

getContentAttr(): string {
  const attrs = this.hostRef.nativeElement.attributes
  for (let i = 0, l = attrs.length; i < l; i++) {
    if (attrs[i].name.startsWith('_nghost-c')) {
      return `_ngcontent-c${attrs[i].name.substring(9)}`
    }
  }
}

ngAfterViewInit() {
  // dynamically add HTML element
  dynamicallyAddedHtmlElement.setAttribute(this.getContentAttr(), '')
}