Question

我有指令，当我滚动时会执行操作。

@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'）添加一些类

知道了

实际上，我不确定是否有一种好的方法。即使在较大的项目中，我也无法避免将设置与类的单一样式混合使用。所以我不会只坚持其中之一。我绝对不会像Kevin所建议的那样仅使用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');
    }

Answer 1

使用addClass()和removeClass()当然是最干净的蜡，因为您可以稍后调整CSS来简单地调整结果。

有关使用方法，请参见Angular Renderer documentation。

Angular 6如何在指令中添加多种样式？样式元素未与指令（addClass）连接

1 个答案: