У меня есть директива, которая выполняет действие при прокрутке.
@HostListener('window:scroll')
doSomething() {
console.log(this.el);
console.log(this.el.nativeElement);
if (window.pageYOffset > 10) {
console.log('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');
}