Angular2 проблемы с дизайном, вызванные атрибутами DOM _ngcontent- * vs. _nghost- *

У меня проблема с scss и cli: angular добавляет атрибут _nghost-fyw-1 к тегу приложений (компонент) во время выполнения. в то же время он добавляет селектор атрибутов в мой css под названием _ngcontent-fyw-1, который, конечно, не будет работать.

У вас есть идея, как я могу изменить это поведение/избежать его?

PS: это также относится к регулярному css.

мои компоненты .scss файл выглядит следующим образом:

my-comp {
  h1 {
    background-color: red;
  }
}

Ответ 1

Ну,

Я сам нашел ответ. Используя настройки по умолчанию, вы не должны поставлять пакетный селектор my-comp в компонентах css.

Вместо этого используйте селектор элементов *, чтобы воздействовать на все элементы, вложенные в my-comp. В противном случае angular будет обрабатывать селектор my-comp в качестве дополнительного элемента и, таким образом, добавить атрибут _ng-content-*, который, конечно, отсутствует в DOM.

Другой вариант - отключить ViewEncapsulation для вашего компонента - знать, что он просто влияет на компонент my-comp

import {Component, ViewEncapsulation} from 'angular2/core'

@Component({
  selector: 'my-comp',
  encapsulation: ViewEncapsulation.None,
  ...
});

https://egghead.io/lessons/angular-2-controlling-how-styles-are-shared-with-view-encapsulation отлично описывает три режима настроек.

Ответ 2

Обновить

Это ::ng-deep с некоторого времени.
Смотрите также комментарии ниже.

оригинал

Вы не предоставили слишком много деталей, где вы добавляете свои стили и какие элементы вы выбираете с помощью селекторов.

Если вы хотите, чтобы стили пересекали границы элементов, "официальным" способом является использование >>> like

:host >>> h1 {
  background-color: red;
}

:host нацелен на текущий элемент.
>>> (или /deep/) заставляет Angular игнорировать _nghost-xxx которые используются для эмуляции инкапсуляции стиля компонента.

См. Также Стили в компоненте для D3.js не отображаются в угловых 2