Как получить глобальный селектор внутри эмуляции эмулированного представления (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]

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

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

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

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

Источник

2 ответа

Решение

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

: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

Источник

Тебе нужно:

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

Вместо:

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

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

Источник
Другие вопросы по тегам