Question

我正在尝试在Angular组件中插入一些html内容组件使用服务调用获取HTML，并设置绑定到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;
  }

如何使用innerHtml为Angular组件中注入的html应用样式？

1 个答案: