Следуйте этому руководству по переходу https://scotch.io/tutorials/angular-2-transclusion-using-ng-content
Однако не упоминается, как стилизовать элементы, которые в конечном итоге заменяют ng-контент.
Похоже, что я могу настроить таргетинг только на этот элемент в css, если он предшествует ключевому слову /deep/, который обычно используется при таргетинге на вложенный компонент. Это верно?
Обновить
::slotted теперь поддерживается всеми новыми браузерами и может использоваться с 'ViewEncapsulation.ShadowDom
https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted
оригинал
::content xxx {... } может также работать или :host xxx {... }. Шимминг не очень строг или точен. AFAIK (>>> /deep/ old) ::ng-deep (поддерживается SASS) и пробел в настоящее время делают то же самое.
Содержимое внутри <ng-content> изолировано от компонента. Он не может видеть атрибуты компонента или стиль.
Если вам нужно стилизовать его, а иногда и вы, у вас есть два варианта:
Вы можете создать обычный файл CSS и создать такой контент. Вы почти наверняка используете тень DOM polyfill. Обычный CSS будет видеть через polyfill и просто стильный элемент. Скажем, у вас есть панель приложений. Вы можете написать:
app-sidebar p {
color:red;
}
Если вы используете ng-cli, любые правила, которые вы пишете в style.scss, будут глобальными.
Если вы хотите использовать тень DOM polyfill и стилируйте свои компоненты с помощью атрибута style или styleUrls декоратора Component, выберите элемент с :host, затем проигнорируйте тень DOM polyfill с дочерним селектором /deep/.
:host выберет элемент./deep/ будет выбирать элементы, не добавляя селектор атрибутов DOM макета тени к вложенным селекторам.Объедините их, и вы можете выбрать все элементы, вложенные внутри элемента компонента хоста, независимо от того, где они объявлены.
так:
:host /deep/ p {
color:red;
}
Это решило мою проблему
::ng-deep {
& > * {
// styles here
}
}