Angular2スタイルはViewEncapsulationなしでは適用されません.None

Question

私はdatatableコンポーネントに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は、私は自分のCSSクラスを追加することができますstyleClassディレクティブを持っている：私は、次のテンプレートを持っています。

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

CSS：

.togggle-column { 
    width: 50px; 
} 

結果では、私は私のクラスのスタイルを正しく適用されますが、されていないことを参照してください。 私はheadタグのスタイルを参照してください。

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

私はその問題は私のCSSクラスに[_ngcontent-nyw-32]を追加する角度ですが、HTMLでは、私は唯一のtoggle-coumnを持って理解しています。私はencapsulation: ViewEncapsulation.Noneを使って修正できることを知っていますが、私はしたくありません。バインディングが正しく機能しない理由

Answer 1

あなたはp型コラムからstyleClassのするのではなく、ネイティブのディレクティブngClassを使用しようとすることができます。それでも解決しない場合は

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

あなたはこのブログ投稿Angular — Advanced Styling Guide (v4+)を読み取ることによって、いくつかのより多くのオプションを見つけることができ、コンテナ

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

にこれを追加することができます。