html - 如何使用 innerHtml 为注入(inject)到 Angular 组件中的 html 应用样式？

Question

我正在尝试在 Angular 组件中插入一些 html 内容 组件使用服务调用获取 HTML 并设置绑定(bind)到 div 的 innerHtml 的属性。

这个html插件有一堆样式需要设置，如下面的scss内容。

但我不确定该怎么做....尝试了 ngStyle 和 ngClass 来返回样式并在 div 中使用，但是没有用。 谁能告诉我如何为 innerHtml 应用样式？ - 谢谢

  <div class [innerHTML]="html"></div>

  private fetchEmail() {
    const d = this._intl.formatDate(this.today, 'yyyy-MM-dd');
    this._vmService.getVariatioMarginEmail(d).subscribe(e => {
      if (!isUndefined(e) || e.length > 0) {
        this.html = e.html;
      }
    });
  }


.table {
    border-collapse: collapse;
    border: 1px solid #999;
    font: normal 11px verdana, arial, helvetica, sans-serif;
    color: #F6ECF0;
    background: transparent;
  }

  th {
    border: 1px solid #999;
    text-align: left;
    vertical-align: middle;
    font-weight: 700;
    background: #333a56;
    color: #fff;
    padding: 5px 10px;
  }

  td {
    border-collapse: collapse;
    border: 1px solid #999;
    padding: 5px 10px;
    color: #555;
  }

  tbody td a {
    background: transparent;
    text-decoration: none;
    color: #F6ECF0;
  }

  a {
    font: normal 11px verdana, arial, helvetica, sans-serif;
  }

Answer 1

我必须使用类和 ngdeep

<div class ='emailClas" [innerHTML]="html"></div>

    .emailClass ::ng-deep table {
    border-collapse: collapse;
    border: 1px solid #999;
    font: normal 11px verdana, arial, helvetica, sans-serif;
    color: #F6ECF0;
    background: transparent;
  }

  .emailClass ::ng-deep  th {
    border: 1px solid #999;
    text-align: left;
    vertical-align: middle;
    font-weight: 700;
    background: #333a56;
    color: #fff;
    padding: 5px 10px;
  }

  .emailClass ::ng-deep td {
    border-collapse: collapse;
    border: 1px solid #999;
    padding: 5px 10px;
    color: #555;
  }

  .emailClass ::ng-deep  tbody td a {
    background: transparent;
    text-decoration: none;
    color: #F6ECF0;
  }

  .emailClass ::ng-deep  a {
    font: normal 11px verdana, arial, helvetica, sans-serif;
  }