没有 ViewEncapsulation.None 就不会应用 Angular2 样式

Question

我将 primeng 用于数据表组件，但问题是关于 angular 中的样式。我有以下模板：

<p-dataTable [value]="values">
    <p-column *ngFor="let column of columns;"
              [header]="column.name"
              [field]="column.field"
              styleClass="{{getColumnCssClasses(column)}}"
             // [styleClass]="getColumnCssClasses(column)" tried this way also
             >
    ...
    </p-column>
  </p-dataTable>

所以，p-column 有 styleClass 指令，我可以在其中添加自己的 css class.

getColumnCssClasses(column) {
   if(column.isToggle) {
      return 'toggle-column';
   }
}

CSS:

.togggle-column {
    width: 50px;
}

结果，我发现我的 class 应用正确，但样式应用不正确。我在 head 标签中看到样式：

<style>.toggle-column[_ngcontent-nyw-32] {
  width: 55px;
}</style>

我知道问题是 Angular 将 [_ngcontent-nyw-32] 添加到我的 css class，但在 html 我只有 toggle-coumn .我知道我可以使用 encapsulation: ViewEncapsulation.None 修复它，但我不想这样做。为什么绑定无法正常工作？

Answer 1

您可以尝试使用原生指令 ngClass 而不是 p-column[=22] 中的 styleClass =].

<p-dataTable [value]="values"> <p-column *ngFor="let column of columns;" [header]="column.name" [field]="column.field" [ngClass]="{{getColumnCssClasses(column)}}" > ... </p-column> </p-dataTable>

如果这不起作用，您可以将其添加到容器中

:host /deep/ .toggle-column { width: 55px; }

您可以通过阅读这篇博文找到更多选项 Angular — Advanced Styling Guide (v4+)。

没有 ViewEncapsulation.None 就不会应用 Angular2 样式

Angular2 Styles are not applied without ViewEncapsulation.None

angular

primeng