Стили Angular2 не применяются без ViewEncapsulation.

Я использую primeng для компонента datatable, но вопрос в стилях в 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.

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

CSS:

.togggle-column {
    width: 50px;
}

В результате я вижу, что мой класс применяется правильно, но не стили. Я вижу стили в теге head:

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

Я понимаю, что проблема в том, что Angular добавляет [_ngcontent-nyw-32] в мой класс css, но в html у меня есть только toggle-coumn. Я знаю, что могу исправить это с помощью encapsulation: ViewEncapsulation.None, но не хочу. Почему привязка работает некорректно?


angular primeng
person user348173    schedule 24.02.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете попробовать использовать собственную директиву ngClass вместо styleClass из p-column.

  <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 Руководство по стилю (v4 +).

person Gerard Sans    schedule 24.02.2017
comment
Да, я пробовал родной ngClass, класс применяется, но стили нет, и в html я вижу: <td class="toggle-column" ng-reflect-klass="toggle-column". В любом случае, класс не содержит [_ngcontent-XXXX]. Попробую: host позже. Спасибо за ответ. - person user348173; 24.02.2017