我有一個 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%
}
uj5u.com熱心網友回復：
您應該禁用該組件的封裝。你可以這樣做：
import { Component, ViewEncapsulation } from '@angular/core';
...
@Component({
...
encapsulation: ViewEncapsulation.None,
})
uj5u.com熱心網友回復：
與組件一起匯入 ViewEncapsulation：
import { Component, ViewEncapsulation } from '@angular/core';
并在裝飾器中為組件設定封裝，以及選擇器、模板、css 樣式等：
encapsulation: ViewEncapsulation.None
例如：
@Component({
selector: 'your-app',
templateUrl: './your.component.html',
styleUrls: ['./your.component.css'],
encapsulation: ViewEncapsulation.None, // <---------
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/416727.html
標籤：