Question

在Angular 7中-如何设置使用ng-content投射的HTML样式。

技术：Angular 7，Angular CLI，SASS，HTML5，Webpack。

我的代码：

注意：我的组件html具有包含/投射功能。该组件具有一个scss文件，并且只有在使用ng-deep的情况下，才能对通过ng-content传入的html进行样式设置。：host :: ng-deep

<table>
  <ng-content></ng-content>
</table>

这是我对上述html组件的理解：

:host::ng-deep {
  table {
    background-color: map-get($theme-brand, flat);
    display: flex;
    flex-direction: column;
    border: 1px solid map-get($theme-contrast, contrast-8);
    border-radius: 5px;

    tr {
      display: flex;
      justify-content: flex-end;
    }

    th, td {
      @extend %p-2;
      word-break: break-all;
      align-items: center;
      display: flex;
      text-align: right;
      width: 250px;
      color: map-get($theme-typography-color, regular);

      &:first-child {
        text-align: left;
        border: none;
        width: 100%;
      }
    }
  }
}

注意：因此上述tr和th，td的css将不会被设置样式，因为除非使用ng-deep，否则投影会阻止样式设置。

尝试过的事情：

ng-deep（可以工作，但不想被浏览器很快弃用）。

Answer 1

根据this question，您有两种不同的方法：

1：使用::slotted伪选择器，新的浏览器已开始支持该伪选择器。要使用它，您需要将encapsulation的{{1}}属性更改为@Component。

2：一种蛮力方法，即将ViewEncapsulation.ShadowDom的{{1}}属性设置为encapsulation。这样，样式将应用于所有页面，而无需由Angular处理。

您可以在此处查看有关ViewEncapuslation的更多详细信息：https://angular.io/api/core/ViewEncapsulation

还有一个discussion in Github。

在Angular 7中-如何设置使用ng-content投影的HTML

1 个答案: