각도 2-innerHTML 스타일링

각도 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를 다시 작성합니다. [innerHTML]이러한 클래스를 사용하여 추가 된 HTML의 경우 추가 되지 않으며 다시 작성된 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의 위치에 따라 다름- 응용 프로그램의 모든 구성 요소 일 수 있음 )

최신 정보

플런저 예

---

따라야 할 간단한 해결책은

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

---

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의 새 버전으로 업그레이드 할 때이 솔루션에 문제가 발생할 수 있습니다 (그러나이 솔루션을 업데이트하는 것은 쉽지 않습니다. 케이스).

참고 URL : https://stackoverflow.com/questions/36265026/angular-2-innerhtml-styling