У меня есть директива, которая выполняет действие при прокрутке.
@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 () пятнадцать раз (фон, высота, ширина, поля, отступы и т. д.), Скажем, для двадцати элементов. Приятно знать, как с этим справиться в более крупном проекте.
Вы получаете массив, потому что getElementsByClassName может возвращать несколько элементов (обратите внимание на 's'). Для полноты вы можете выполнить итерацию по этому массиву и добавить класс для всех из них.
Использование addClass()
и removeClass()
, безусловно, является самым чистым воском для этого, так как вы можете просто настроить свой результат, изменив CSS позже.
См. Документация по Angular Renderer, чтобы узнать, как его использовать.
Я пытался разрешить sth = document.getElementsByClassName ('oldClass); а затем в if - this.renderer.addClass ('oldClass', 'onScroll'); но я получаю сообщение об ошибке «Не могу прочитать свойство 'add' of undefined»
Не забудьте принять ответ, нажав на галочку рядом с ним, если он решил вашу проблему. :-)
Что плохого в многократном вызове setStyle ()?