在角7-如何样式的HTML，使用ng-内容投射。

Question

在角7-如何样式HTML的投影使用ng-内容。

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

我的代码：

备注：带有transclusion /的组件html。此组件具有一个scss文件，并且只有在使用ng-深度时，才能对通过ng-内容的html进行样式化，例如:host：：ng-深处。

<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的css由于投影而不会被样式化，除非我使用ng深度。

Things尝试了

• ng-深层(它可以工作，但不希望浏览器很快就不再推荐它了)。

Answer 1

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

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

2:一种蛮力方法，将@Component的@Component属性设置为ViewEncapsulation.None。这样，样式将应用于所有页面，而不会被角处理。

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

还有一个关于这一点的吉顿语的讨论。