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

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。