각도 2-innerHTML 스타일링

HTTP 호출에서 HTML 코드 덩어리를 얻고 있습니다. HTML 블록을 변수에 넣고 [innerHTML]을 사용하여 페이지에 삽입하지만 삽입 된 HTML 블록의 스타일을 지정할 수 없습니다. 누구든지 내가 이것을 달성 할 수있는 제안이 있습니까?

@Component({selector: 'calendar',
template: '<div [innerHTML]="calendar"></div>',
providers:[HomeService], 
styles: [` 
h3 {color:red;}
`})

스타일을 지정하려는 HTML은 변수 "calendar"에 포함 된 블록입니다.

업데이트 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);
}

Angular 구성 요소 내에 동적으로 추가 된 HTML 요소의 스타일을 지정하려는 경우 도움이 될 수 있습니다.

// 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(), '')
}

내 생각 에이 속성에 대한 규칙이 Angular 버전간에 안정적이라고 보장되지 않으므로 Angular의 새 버전으로 업그레이드 할 때이 솔루션에 문제가 발생할 수 있습니다 (그러나이 솔루션을 업데이트하는 것은 쉽지 않습니다. 케이스).

CMS에서 자주로 콘텐츠를 가져옵니다 [innerHTML]="content.title". 필요한 클래스를 styles.scss구성 요소의 scss 파일이 아닌 응용 프로그램의 루트 파일에 배치합니다. CMS는 의도적으로 인라인 스타일을 제거하므로 제작자가 콘텐츠에 사용할 수있는 클래스를 준비해야합니다. 사용하여 기억 {{content.title}}내용에서 HTML 렌더링되지 않습니다 템플릿.

스타일 프리 프로세서로 sass를 사용하는 경우 다음을 수행하여 개발자 종속성을 위해 기본 Sass 컴파일러로 다시 전환 할 수 있습니다.

npm install node-sass --save-dev

개발을 위해 / deep /을 계속 사용할 수 있습니다.