Recibo fragmentos de códigos HTML de llamadas HTTP. Coloco 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/::ranurado
actualización 1 :: ng-profundo
/deep/ quedó en desuso y se reemplazó por ::ng-deep .
::ng-deep también está marcado como obsoleto, pero aún no hay un reemplazo disponible.
Cuando ViewEncapsulation.Native sea compatible correctamente con todos los navegadores y admita el estilo a través de los límites del DOM oculto, ::ng-deep probablemente se suspenderá.
original
Angular agrega todo tipo de clases CSS al HTML que agrega al DOM para emular la encapsulación Shadow DOM CSS 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 solución alternativa, intente
/* :host /deep/ mySelector { */ :host ::ng-deep mySelector { background-color: blue; }index.html /* body /deep/ mySelector { */ body ::ng-deep mySelector { background-color: green; } >>> (y el equivalente /deep/ pero /deep/ funciona mejor con SASS) y ::shadow se agregaron en 2.0.0-beta.10. Son similares a los combinadores Shadow DOM CSS (que están en desuso) y solo funcionan con encapsulation: ViewEncapsulation.Emulated que es el valor predeterminado en Angular2. Probablemente también funcionen con ViewEncapsulation.None , pero 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 utilizar
@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; pueden ser todos los componentes en su aplicación)
Actualizar
La solución simple que debe seguir es
import { DomSanitizer } from '@angular/platform-browser'; constructor(private sanitizer: DomSanitizer){} transformYourHtml(htmlTextWithStyle) { return this.sanitizer.bypassSecurityTrustHtml(htmlTextWithStyle); }Extraemos contenido con frecuencia de nuestro CMS como [innerHTML]="content.title" . Colocamos las clases necesarias en el archivo raíz styles.scss 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 generará html del contenido.