Tengo un MatDialog que su padre proporciona una cadena HTML cuando se construye. La cadena HTML es la fuente del contenido de un div con nombre y contiene etiquetas <table> incrustadas dentro del html, pero por alguna razón, el estilo de tabla definido en el archivo scss del cuadro de diálogo no se aplica a la cadena que especifico como [innerHTML] , aunque funciona bien para etiquetas <table> codificadas directamente en el archivo html.
¿Hay alguna forma en que pueda hacer que el cuadro de diálogo represente el HTML interno con los estilos contenidos en la plantilla de estilos para el componente del cuadro de diálogo?
export class DialogAgreementViewer implements AfterViewInit { constructor(public dialogRef: MatDialogRef<DialogAgreementViewer>, @Inject (MAT_DIALOG_DATA) public data: string, protected _sanitizer : DomSanitizer){ this.agreementText = this._sanitizer.bypassSecurityTrustHtml(data); } public agreementText : SafeHtml; @ViewChild('agreementText') agreementTextCtl : ElementRef; }HTML:
<p>Agreement Template</p> <table>. <-- Defined table styles are applied to this table. <tbody> <tr><td>Title</td><td>Name of Work</td></tr> </tbody> </table> <div [innerHTML]='agreementText'></div> <-- Table styles not applied here.SCSS:
table, td { border: 1px solid black; } table { border-collapse: collapse; width: 75% }Importe ViewEncapsulation junto con el componente:
import { Component, ViewEncapsulation } from '@angular/core';y configure la encapsulación para el componente en el decorador, junto con el selector, la plantilla, los estilos css, etc.:
encapsulation: ViewEncapsulation.NonePor ejemplo:
@Component({ selector: 'your-app', templateUrl: './your.component.html', styleUrls: ['./your.component.css'], encapsulation: ViewEncapsulation.None, // <--------- })Debe deshabilitar la encapsulación para ese componente. Puedes hacerlo así:
import { Component, ViewEncapsulation } from '@angular/core'; ... @Component({ ... encapsulation: ViewEncapsulation.None, })