Angular @HostBinding с CSS-сеткой
Вступление
Исходный код / Живая демонстрация: StackBlitz 🚀
Цель статьи: изучить один из способов динамического изменения свойств сетки CSS с помощью @HostBinding
декоратора Angular.
Темы статей:
- Используйте CSS-Grid с угловыми компонентами с помощью селектора
:host
- Как динамически настроить свойства сетки CSS, такие как
column-template-rows
иgap
, с помощью TypeScript. - DOM Sanitizer от Angular, почему мы должны обходить безопасность и некоторые рекомендации, которым мы должны следовать при этом.
CSS Grid (контейнер и элементы)
Наша CSS Grid будет состоять из двух компонентов Angular. Родитель / контейнер и дочерний элемент / элемент. CSS Grid - это относительно новое соглашение для написания CSS, которое позволяет нам создавать реактивные сетки для размещения и выравнивания элементов.
Используя селектор :host
, угловые компоненты могут выбирать сами себя. Мы можем использовать эту концепцию для обработки наших компонентов как контейнера сетки или элемента сетки и избегать использования оболочки divs
. 🎁
display: grid
: Определяет элемент как сетку-контейнерgrid-template-rows
: определяет максимальное количество строк и размер строкиgrid-auto-flow: column
: указывает сетке создать новый столбец (вместо новой строки), когда в нем не хватает места по вертикали.gap
: определяет расстояние между каждым элементом.
В нашем примере каждая строка будет занимать 1 долю пространства. Поскольку в нашем случае repeat(3, 1fr)
мы указали 3 строки, каждая строка будет занимать 1/3 высоты div. Наши столбцы будут занимать место в зависимости от размера контекста.
Совет по CSS-сетке 💎
Хотите центрировать что-то вроде содержимого в наших элементах сетки? Сделайте элемент сетки собственным контейнером сетки и используйте justify-items
и align-items
.
.grid-item-class-name { display: grid; justify-items: center; align-items: center; }
HostBinding
Теперь, когда у нас есть базовое представление о нашей сетке, мы можем получить доступ к свойствам CSS в нашем классе компонентов Angular.
Связывание хоста позволяет нам получать доступ и применять стили и классы CSS к нашему компоненту. - Мне нравится думать об этом как об обновлении свойств в селекторе :host
через TypeScript.
Обновление нашей переменной HostBinding изменит значение свойства CSS для компонента. Мы можем связать это с событием, чтобы позволить пользователю обновлять нашу сетку.
Угловой наконечник 💎
Мы также можем добавлять и удалять классы с помощью @HostBinding
export class MyComponent { @HostBinding('class.is-valid') get validValue() { return this.value.valid; } }
Обработка событий
Теперь, когда Angular и CSS Grid объединились с HostBinding. Мы разрешим пользователю (с ограничением) обновлять grid-template-columns
и gap
.
Использование директивы Angular - это простой способ разрешить родственным компонентам взаимодействовать друг с другом. При нажатии кнопки мы отправим в контейнер событие для обновления привязки хоста.
Приведенный выше фрагмент выполняет следующее
- Подписывается на обновления промежутков, обновляя промежуток на
5px
по событию, что увеличит или уменьшит интервал между элементами сетки - Подписывается на обновления строк, обновляя первый параметр в
repeat()
на 1, что увеличит или уменьшит количество строк в нашей сетке. - Проверьте пробелы и строки, чтобы убедиться, что мы не опускаемся ниже 1 строки или 0 пробелов.
- Использует DOM Sanitizer, чтобы мы могли передавать стиль в виде строки.
Источник кнопок и директивы можно найти на StackBlitz; они прямые и маленькие. - Контейнер выполняет всю тяжелую работу. 🏋️♀️
Угловой наконечник 💎
Если у родителя есть директива, все дочерние элементы родителя могут внедрить экземпляр этой директивы в свой класс Typescript.
<!-- HTML --> <app-container appConnector> <app-item id="Hello"></app-item> <app-item id="2"></app-item> <app-item id="3"></app-item> </app-container> /* TypeScript */ export class ItemComponent { constructor(public appConnector: ConnectorDirective) { this.appConnector.eventEmitter.subscribe(...) } }
Дезинфицирующее средство DOM
Есть много статей и ресурсов по изучению Angular’s DOM Sanitizer.
Вот мой краткий обзор. Если мы заблокируем, где пользователь может отправлять данные и какие данные пользователь может отправлять, можно будет считать «безопасным» обход Angular DOM Sanitizer. 🧼
Мы разрешаем пользователю обновлять первый параметр в функции CSS repeat()
(где). Мы ограничиваем ввод данных пользователем нажатием кнопки; мы контролируем значение, которое производит клик (что). 🔐
Заключение
- Angular
:host
Selector позволяет нам рассматривать компоненты как css-grids или css-grid-items - Angular
@HostBinding
Decorator позволяет нам получать доступ и обновлять классы и стили CSS. - Angular очищает потенциально опасные обновления DOM. Мы должны подумать о том, где и что мы разрешаем пользователям обновлять, минуя эту функцию.
- Спасибо за прочтение! 🎉