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+)一些更多的選擇。