Angular 2 - estilo innerHTML

Recibo fragmentos de códigos HTML de llamadas HTTP. Pongo los bloques HTML en una variable y los inserto en mi página con [innerHTML] pero no puedo diseñar el bloque HTML insertado. ¿Alguien tiene alguna sugerencia de cómo podría lograr esto?

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

El HTML que quiero diseñar es el bloque contenido en la variable "calendario".

actualización 2 ::slotted

::slotted ahora es compatible con todos los navegadores nuevos y se puede usar con ViewEncapsulation.ShadowDom

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

actualización 1 :: ng-deep

/deep/fue desaprobado y reemplazado por ::ng-deep.

::ng-deep también está marcado como obsoleto, pero aún no hay reemplazo disponible.

Cuando ViewEncapsulation.Nativetodos los navegadores lo admiten correctamente y admite el estilo a través de los límites de DOM de la sombra, ::ng-deepprobablemente se suspenderá.

original

Angular agrega todo tipo de clases CSS al HTML que agrega al DOM para emular la encapsulación CSS DOM del shadow para evitar estilos de sangrado dentro y fuera de los componentes. Angular también reescribe el CSS que agrega para que coincida con estas clases agregadas. Para HTML agregado usando [innerHTML]estas clases no se agregan y el CSS reescrito no coincide.

Como una solución alternativa

• para CSS agregado al componente

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

• para CSS agregado a index.html

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

>>>(y el equivalente /deep/pero /deep/funciona mejor con SASS) y ::shadowse agregaron en 2.0.0-beta.10. Son similares a los combinadores CSS DOM de sombra (que están en desuso) y solo funcionan con lo encapsulation: ViewEncapsulation.Emulatedque es el valor predeterminado en Angular2. Probablemente también funcionen, ViewEncapsulation.Nonepero solo se ignoran porque no son necesarios. Estos combinadores son solo una solución intermedia hasta que se admitan características más avanzadas para el diseño de componentes cruzados.

Otro enfoque es usar

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

para todos los componentes que bloquean su CSS (depende de dónde agregue el CSS y dónde está el HTML que desea diseñar, puede que sean todos los componentes de su aplicación)

Actualizar

Plunker de ejemplo

La solución simple que debes seguir es

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

constructor(private sanitizer: DomSanitizer){}

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

Si intenta diseñar elementos HTML añadidos dinámicamente dentro de un componente angular, esto podría ser útil:

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

Supongo que no se garantiza que la convención para este atributo sea estable entre las versiones de Angular, por lo que uno podría tener problemas con esta solución al actualizar a una nueva versión de Angular (aunque la actualización de esta solución probablemente sería trivial en ese sentido). caso).

Extraemos contenido con frecuencia de nuestro CMS como [innerHTML]="content.title". styles.scssColocamos las clases necesarias en el archivo raíz de la aplicación en lugar de en el archivo scss del componente. Nuestro CMS elimina deliberadamente los estilos en línea, por lo que debemos tener clases preparadas que el autor pueda usar en su contenido. Recuerde que usar {{content.title}}en la plantilla no representará html del contenido.

Si está utilizando sass como preprocesador de estilo, puede volver al compilador Sass nativo para la dependencia del desarrollador de la siguiente manera:

npm install node-sass --save-dev

Para que pueda seguir usando / deep / para el desarrollo.