Я понимаю, что вы не хотите писать такие же правила для вашего общего компонента (селектора)
, т. Е. Вы хотите делать стили, в которых находится ваш общий селектор.
Вещи, которые выможно сделать, чтобы справиться с этим:
1.Создайте свой собственный логический фреймворк CSS
Напишите наиболее часто используемые правила CSS в глобальном CSS. Например, если у вас есть встроенный загрузчик, и вы хотите переопределить загрузчик, вы напишите наиболее распространенные переопределения в app.css, которыйпереопределяет загрузчик.
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles/app.scss"
],
Этот app.scss должен быть написан так, чтобы вы могли его переопределить.
Отправка правил в качестве ввода отправка пользовательских правил Obj и использование в элементах, которые вы хотите переопределить.
<newsletter [input]="customRulesObj"></newsletter>
component.ts
customRulesObj = new CustomRulesClass();
customRulesObj.color = 'red';
Вы можете отправлять правила для ввода в различных компонентах, создав общий класс, поскольку вы знаете, куда вы встраиваете этот компонент.
Расширение этого компонента из общего компонента Если вы слишком заинтересованы в CSS, вы можете расширить свой компонент из общего компонента, который предоставляет вам логику CSS по мере необходимости..
export class NewsLetterComponent extends CSSComponent implements OnInit
{
}
css-component.ts
В этом компоненте можно логически определять css для каждого хоста, текущего маршрутизатора и других кратных условий if else.Вы можете определить правила, изменив условия регистра и связав эти правила с компонентом, который вы расширили.