在Angular 7中 - 我如何使用NG -Content预测的HTML样式

Question

在Angular 7中 - 我如何使用ng -content投影。

Tech ：Angular 7，Angular CLI，SASS，HTML5，WebPack。

我的代码：

NOTE ：我的组件HTML具有transclusion/投影。该组件具有SCSS文件，并且只有在使用NG-De-peep时才能设计通过NG-Content的HTML。：主机:: 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%;
      }
    }
  }
}

NOTE ：因此，由于投影阻止了样式，因此TR和TH的上述CSS不会被造型。

。

尝试的事情：

• ng-deep(有效但不想用浏览器尽快将其用作其弃用(。

Answer 1

根据这个问题，您有两种不同的方法：

1：使用::开槽的伪选择器，该选择器开始受到新浏览器的支持。为了使用它，您需要将encapsulation的@Component属性更改为ViewEncapsulation.ShadowDom。

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

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

Github也有关于此的讨论。