Как получить глобальный селектор внутри инкапсуляции эмулируемого представления (CSS/Angular2)

У меня есть компонент Home с этим внутри:

<alert type="info">Hello from ng2-bootstrap</alert>

Внутри моего home.style.scss у меня есть это:

:host .alert {
  background-color: green;
}

который должен изменить цвет фона на зеленый, но это не так.

Приведенный выше код css создаст этот стиль:

[_nghost-wjn-3]   .alert[_ngcontent-wjn-3] {
  background-color: green;
}

и окончательный HTML выглядит так:

<home _nghost-wjn-3="">
  <div _ngcontent-wjn-3="" class="card-container">
    <alert _ngcontent-wjn-3="" type="info" ng-reflect-type="info">
      <div class="alert alert-info" role="alert" ng-reflect-initial-classes="alert" ng-reflect-ng-class="alert-info">
        Hello from ng2-bootstrap  Sat Sep 17 2016
      </div>
    </alert>
  </div>
</home>

Я не знаю, в чем здесь проблема, но я думаю, что селектор неправильный. Я бы хотел, чтобы окончательный селектор был:

[_nghost-wjn-3]   .alert

вместо:

[_nghost-wjn-3]   .alert[_ngcontent-wjn-3]

Или, другими словами, почему для <div class="alert">...</div> нет атрибута _ngcontent-wjn-3?

Может быть, я все делаю неправильно. Чего я пытаюсь добиться, так это настроить CSS отдельных компонентов начальной загрузки (<alert> в приведенном выше коде), как это предусмотрено библиотекой ng2-bootrap (https://github.com/valor-software/ng2-bootstrap) внутри моих пользовательских компонентов (<home> в приведенном выше коде).

Я использую инкапсуляцию представления по умолчанию (эмулируемую) в домашнем компоненте.

Как я могу это сделать, пожалуйста?


angular css angular2viewencapsulation ng2-bootstrap
person Jakub    schedule 17.09.2016    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Я понял это сам. Это то, что я искал:

:host /deep/ .alert {
  background-color: green;
}

Приведенный выше код выдаст следующее:

[_nghost-wjn-3] .alert {
  background-color: green;
}

Таким образом, я могу изменить стили по умолчанию класса начальной загрузки (в данном случае .alert) внутри моего компонента <home>.

Источник: https://angular.io/docs/ts/latest/guide/component-styles.html

person Jakub    schedule 17.09.2016

arrow_upward
0
arrow_downward

Тебе нужно:

[_nghost-wjn-3] alert[_ngcontent-wjn-3]

Вместо:

[_nghost-wjn-3] .alert[_ngcontent-wjn-3]

Если вы пойдете и проверите свою структуру, тег оповещения имеет атрибут ngcontent..., а не его дочерний элемент div с классом оповещения.

person Edmundo Rodrigues    schedule 17.09.2016
comment
Правильно, но мне нужно установить цвет фона элемента <div class="alert">...</div>, а не элемента <alert>. Как тогда настроить свой селектор? Я попробовал это: :host alert .alert { background-color: green; }, который создает: [_nghost-wjn-3] alert[_ngcontent-wjn-3] .alert[_ngcontent-wjn-3] { background-color: green; }, но этот стиль не будет применяться, потому что <div class="alert">...</div> не имеет _ngcontent-wjn-3. Есть ли способ сказать CSS, чтобы он не добавлял [_ngcontent-wjn-3] к .alert? - person Jakub; 17.09.2016