構築時に親からHTML文字列が提供されるMatDialogがあります。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%
}