我有一个 MatDialog,它在构造时由其父级提供了一个 HTML 字符串。 HTML 字符串是命名 div 内容的来源,包含 <table>
标记嵌入在 html 中,但由于某种原因,对话框的 scss 文件中定义的表格样式未应用于我指定为 [innerHTML]
的字符串, 虽然它适用于 <table>
标记直接硬编码到 html 文件中。
有什么方法可以让对话框使用对话框组件的样式模板中包含的样式呈现 innerHTML?
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%
}
最佳答案
您应该禁用该组件的封装。你可以这样做:
import { Component, ViewEncapsulation } from '@angular/core';
...
@Component({
...
encapsulation: ViewEncapsulation.None,
})
关于javascript - Angular:组件 scss 样式未应用于提供给 div 的 [innerHTML] 的标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70775114/