Как оформить нг-контент

Следую этому учебнику по включению https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

Однако нет упоминания о том, как стилизовать элементы, которые в конечном итоге заменяют ng-контент.

Кажется, что я могу только предназначаться для тех элементов в CSS, если им предшествует /deep/ ключевое слово, которое обычно используется при нацеливании на вложенный компонент. Это правильно?

Источник

3 ответа

Решение

Обновить

::slotted теперь поддерживается всеми новыми браузерами и может использоваться с `ViewEncapsulation.ShadowDom

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

оригинал

::content xxx { ... } может работать так же или :host xxx { ... }, Шимминг не очень строг или точен. НАСКОЛЬКО МНЕ ИЗВЕСТНО (>>>/deep/ старый) ::ng-deep (поддерживается SASS) и пробел в настоящее время делают то же самое.

Источник

Содержимое внутри <ng-content> изолирован от компонента. Он не может видеть атрибуты или стили компонента.

Если вам нужно его стилизовать, а иногда и вам, у вас есть два варианта:

1. Просто напишите CSS

Вы можете создать обычный файл CSS и стилизовать содержимое таким образом. Вы почти наверняка используете теневой DOM polyfill. Обычный CSS будет видеть сквозь полифилл и просто стилизовать элемент. Скажем, у вас есть боковая панель приложения. Вы могли бы написать:

app-sidebar p {
  color:red;
}

Если вы используете ng-cli, все правила, которые вы пишете в style.scss, будут глобальными.

2. Используйте: host /deep/ selector

Если вы хотите использовать теневое DOM polyfill и стилизовать ваши компоненты, используя style или же styleUrls атрибут Component декоратор, выберите элемент с :hostзатем игнорируйте теневой DOM-полифилл с /deep/ дочерний селектор.

  • :host выберет элемент.
  • /deep/ выберет элементы, не добавляя селектор атрибута DOM для вложенных селекторов.

Соедините их вместе, и вы сможете выбрать все элементы, вложенные в элемент хост-компонента, независимо от того, где они объявлены.

вот так:

:host /deep/ p {
  color:red;
}
Источник

Это решило мою проблему

::ng-deep {
    & > * {
         // styles here
    }
}
Источник

В качестве альтернативы приведенным выше ответам вы можете создать директиву, которая будет применяться к контенту, и использовать директиву для добавления стиля для контента.

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