Angular2样式不适用没有ViewEncapsulation.None

Question

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

<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类。

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

CSS：

.togggle-column { 
    width: 50px; 
} 

在结果，我看到我的类是正确应用，而不是风格。 我看到的款式在head标签：

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

我明白，问题是角添加[_ngcontent-nyw-32]到我的CSS类，但在HTML我只有toggle-coumn。我知道我可以使用encapsulation: ViewEncapsulation.None修复它，但我不想。为什么绑定无法正常工作？

Answer 1

你可以尝试从p柱使用原生指令ngClass代替的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+)一些更多的选择。