Я относительно новичок в angular. В процессе преобразования приложения React в Angular только в учебных целях. У меня есть родительский компонент с кнопкой (компонент Custom Button). Эта кнопка при загрузке в родительском элементе должна быть скрыта, а при наведении курсора кнопка должна отображаться. Итак, вы, вероятно, догадались, что у меня есть несколько селекторов CSS, связанных с родительским компонентом, которые переопределяют дочерний CSS. Сначала должно быть display: none, а затем при наведении курсора я меняю его на display: flex Итак, первая проблема, с которой я столкнулся, заключалась в том, что я не мог переопределить дочерний CSS из родительского CSS. Прочитав всевозможные сообщения, я переместил переопределения CSS из родительского CSS в глобальную таблицу стилей, а также добавил encapsulation: ViewEncapsulation.None в дочерний компонент.

Следующее, что я заметил, это то, что align-items: center не работал с дочерним элементом. Сначала я подумал, что мне нужно добавить эту часть к глобальным стилям? но что мне действительно нужно знать, так это то, что это норма в Angular? Если да, то некоторые вещи для меня не имеют смысла. Эти стили действительно не глобальны. Они связаны только с родительским компонентом, поэтому кажется странным добавлять их в глобальную таблицу стилей.

Что касается того, что align-items не выравнивает дочерний элемент (настраиваемая кнопка), я считаю, что это происходит из-за добавления дополнительного div вокруг кнопки. Итак, как вы справляетесь с такими ситуациями?

enter image description here

Оцените любые советы / подсказки.

Спасибо!

-1
sayayin 31 Авг 2020 в 22:27

2 ответа

Лучший ответ

Вы можете перезаписать дочерние классы CSS из родительского компонента. это способ:

Предполагая, что ваш дочерний компонент имеет этот CSS

 .child-class {
     background-color: blue;
 }

Когда вы используете этот компонент, цвет фона будет синим. Но если вы хотите изменить этот цвет на КРАСНЫЙ. В родительском компоненте, в котором вы хотите внести изменения, вам необходимо сделать следующее:

В вашем родительском компоненте

:host {
     ::ng-deep{
       .child-class {
             background-color: red;
       }
     }
}

: host относится к тегу HTML компонента (который создается Angular, в вашем случае тег компонента, содержащий app-custom-button ). Также вы можете применить CSS к тегу компонента.

Например:

:host{
     width: 100vw;
     height: 100vh
}

А с помощью :: ng-deep вы можете перезаписать ВСЕ стили внутри вашего компонента. Не имеет значения, является ли стиль из вашего дочернего компонента, внука, праправнука и т. Д., Даже если это компонент из внешней библиотеки.

Итак ... Например, у вас может быть "пользовательский цвет фона как синий", тогда в одном компоненте вы можете сохранить этот цвет, но в другом компоненте вы можете изменить цвет на красный, а в другом компоненте вы можете изменить цвет на зеленый .. ..

0
Manuel Panizzo 1 Сен 2020 в 00:56

Angular имеет концепцию ViewEncapsulation. По умолчанию установлено значение ViewEncapsulation.Emulated, а CSS, который вы вставляете в компонент, специфичен для данного компонента и только для этого компонента. CSS не будет применяться к дочерним компонентам.

Вы можете переключиться на ViewEncapsulation.None и отключить это поведение, и все правила css в вашем файле css будут применены ко всем вашим компонентам в приложении, и возможно, вам не нужно такое поведение. Вот почему я советую вам оставить этот вариант.

Другой вариант, который у вас есть, - это поместить ваше конкретное правило css в src/style.css (если вы не меняли путь по умолчанию). Все правила css, помещенные в этот файл, будут применяться ко всему приложению, и вы можете сохранить ViewEncapsulation своего компонента.

Что касается align-items, я думаю, вы правы: пользовательская-кнопка-приложение оборачивает вашу кнопку, поэтому вам нужно установить width: 100% для своей кнопки, а затем, в конечном итоге, изменить размер пользовательской-кнопки-приложения

0
Gauthier T. 31 Авг 2020 в 21:58