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

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>

这是我对上述组件的 sass 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 伪选择器，新浏览器开始支持该选择器。要使用它，您需要将@Component 的encapsulation 属性更改为ViewEncapsulation.ShadowDom。

2：一种蛮力方式，将@Component的encapsulation属性设置为ViewEncapsulation.None。这样，样式将应用于所有页面，而无需 Angular 处理。

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

还有一个discussion in Github 与此有关。