1

構築時に親から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%
    }
4

2 に答える 2