Применение CSS из компонента Angular к подкомпоненту
У нас есть собственная библиотека компонентов Angular (один проект), каждый компонент имеет базовые стили.
Мы используем эту библиотеку в нашем приложении (другой проект).
Компонент в приложении содержит компонент из нашей библиотеки.
Из глобального файла styles.scss в приложении я могу легко настроить таргетинг на элементы в библиотечном компоненте.
Если я перемещу этот глобальный CSS в файл CSS компонента приложения, попробуйте что угодно, я не смогу настроить таргетинг на какие-либо элементы внутри компонента библиотеки.
приложение-component.html
<div class = "outter">
<library-component specificityattr></library-component>
</div>
библиотека-component.html
<div class = "generic-styles">
<p class = "hello">Hello</p>
</div>
приложение-component.scss
library-component[specificityattr] p.hello {
background: red;
}
стили.scss
library-component[specificityattr] p.hello {
background: green;
}
Без селектора в styles.scss я ожидаю, что тег P будет иметь красный фон. Только когда я помещаю тот же селектор в styles.scss, я получаю зеленый фон.
Как это терпит неудачу?
Каков правильный способ стилизации подкомпонентов компонентов?
Ответы 2
Ваш компонент :host - это th library-component, и вы хотите применить CSS к некоторым "глубоким" DOMS, поэтому это означает :ng-deep
Использовать
:host library-component[specificityattr] ::ng-deep p.hello {
background: green;
}
Спасибо - я нашел время, чтобы прочитать эту страницу: blog.angular-university.io/angular-host-context Это помогло мне понять, что происходило выше: :host нацелен на экземпляр этого компонента, а ::ng-deep удаляет попытку нацелить этот компонент на прямое содержимое (и именно эта часть позволяет вам нацеливаться на подкомпонент) Что беспокоит, так это то, что он неопределенно помечен как «устаревший», но реализуемая идея кажется здравой. Время покажет!
То, что вы испытываете, является эффектом компонентов по умолчанию ViewEncapsulation в Angular.
Когда вы определяете компонент, как показано ниже, инкапсуляция представления компонента будет значением по умолчанию, которое я включил в комментарий. Это означает, что Angular не будет создавать так называемый «теневой DOM» для вашего компонента, и все стили будут применяться только к вашему компоненту.
Инкапсулированный компонент
@Component({
selector: 'my-component',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
//encapsulation: ViewEncapsulation.Emulated
})
Если вместо этого вы хотите применить стили не только к вашему компоненту, вы можете указать конкретный ViewEncapsulation в объявлении вашего компонента. Использование ViewEncapsulation.None переместит стили в заголовок DOM, но все равно не создаст теневой DOM.
Без инкапсуляции
@Component({
selector: 'my-component',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None
})
Взгляните на этот пример StackBlitz
Важно иметь в виду, что ViewEncapsulation.None будет "утечка" ваших стилей для других компонентов, что, в свою очередь, усложнит стилизацию вашего приложения, если вы точно не знаете, где определены ваши стили.
Спасибо, Дэниел, я думаю, что ваш ответ может показаться подходящим, но я специально искал если, компоненту должно быть разрешено стилизовать любые подкомпоненты, и как он может это сделать. Я думаю, что ваш ответ не касается этого более широкого концептуального вопроса, но мне все же полезно взглянуть на эти варианты, чтобы лучше понять более широкий сценарий.
если, он должен иметь возможность стилизовать дочерний компонент, в первую очередь основан на мнении, и я ответил на как. Вы специально спросили "Как это не удается?", на что я и ответил. Я рад, что вы нашли мой ответ полезным, но будьте более точными, если вам нужны более подходящие ответы! :)
ты спаситель жизни, братан, проголосовал, это решило мою проблему, застрявшую в этом за последние 7 дней
Рад, что ответ был полезен, @DeepakGoyal!
но жарко, чтобы остановить утечку css, когда мы переходим к какой-либо другой ссылке, чем ее использование на предыдущей странице css, возможно ли это, например, из url1, я использую скин2 путем инкапсуляции, но мой скин по умолчанию — skin1.css, но когда я перехожу на URL 2, он все еще использует скин2 не использую skin1.css в качестве скина по умолчанию
скажите мне для получения дополнительной помощи