Angular 6 Как добавить несколько стилей в директиву? Элемент стиля, не связанный с директивой (addClass)

У меня есть директива, которая выполняет действие при прокрутке.

@HostListener('window:scroll')
doSomething() {


    console.info(this.el);
    console.info(this.el.nativeElement);

    if (window.pageYOffset > 10) {
        console.info('mouse scroll blahblah');


        this.renderer.setStyle(this.el.nativeElement, 'height', '45px');



    } else {
        this.renderer.removeStyle(this.el.nativeElement, 'height');
    }

}

Но я хочу также добавить цвет фона к этому элементу И другой стиль для элемента, который находится в другом компоненте. Как это сделать? Можно ли добавить что-то вроде

this.renderer.setStyle([
     element1 [ 'height', '45px], ['background-color', 'red']
],
[
     element1, 'background-color', 'blue'
]

Или, может быть, мне следует использовать что-то совершенно отличное от setStyle? Я знаю, что мой пример запутался, но я думаю, что может быть что-то похожее, я имею в виду ... Мы не должны писать

this.renderer.setStyle(this.el.nativeElement, 'height', '45px');
this.renderer.setStyle(this.el.nativeElement, 'background-color', 'red');

так далее? Или, может быть, мне даже не следует пытаться это сделать, а просто добавить класс, поскольку это единственный правильный способ добавить несколько стилей? Но как? document.getElementsByClassName ('element2') добавить класс


Понятно

На самом деле я не уверен, что есть один хороший способ сделать это. Даже в более крупном проекте я не могу избежать смешивания настроек и удаления одного стиля с классами. Так что я бы не остановился только на одном из них. Я бы определенно не стал использовать только setStyle, как предложил Кевин, так как позже удалить его ужасно. Да, он позволяет вам настраивать все независимо, но вы можете сделать это проще, в большинстве случаев вам даже не понадобится управлять конкретным стилем элемента, если - тогда используйте класс, удалите его, если вам нужно удалить отдельную часть, сделайте это пользователя setStyle / removeStyle.

Если у вас небольшой проект, вы можете использовать все, что захотите. Если он большой ... Что ж, скорее всего, в какой-то момент он все равно не будет чистым, поэтому смешайте то, что вам подходит: P

const sth = document.getElementsByClassName('myElement');

    if (window.pageYOffset > 10) {

        this.renderer.addClass(sth[0], 'onScroll'); //for some reason there is array created, so you have to get there by adding [0]
        this.renderer.addClass(this.el.nativeElement, 'onScroll');

    } else {
        this.renderer.removeClass(this.el.nativeElement, 'onScroll');
        this.renderer.removeClass(sth[0], 'onScroll');
    }

Что плохого в многократном вызове setStyle ()?

Kevin FONTAINE 23.10.2018 18:01

Я не думаю, что это «хорошая практика», если я напишу setStyle () пятнадцать раз (фон, высота, ширина, поля, отступы и т. д.), Скажем, для двадцати элементов. Приятно знать, как с этим справиться в более крупном проекте.

Aerogirl 23.10.2018 18:46

Вы получаете массив, потому что getElementsByClassName может возвращать несколько элементов (обратите внимание на 's'). Для полноты вы можете выполнить итерацию по этому массиву и добавить класс для всех из них.

Kevin FONTAINE 24.10.2018 09:07
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
3
3
5 642
1

Ответы 1

Использование addClass() и removeClass(), безусловно, является самым чистым воском для этого, так как вы можете просто настроить свой результат, изменив CSS позже.

См. Документация по Angular Renderer, чтобы узнать, как его использовать.

Я пытался разрешить sth = document.getElementsByClassName ('oldClass); а затем в if - this.renderer.addClass ('oldClass', 'onScroll'); но я получаю сообщение об ошибке «Не могу прочитать свойство 'add' of undefined»

Aerogirl 23.10.2018 19:03

Не забудьте принять ответ, нажав на галочку рядом с ним, если он решил вашу проблему. :-)

Kevin FONTAINE 24.10.2018 09:13

Другие вопросы по теме