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

Posted 2023-02-22

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

【英文标题】：Angular 6 How to add multiple styles in directive? Style element not connected with directive (addClass)

【发布时间】：2019-03-27 22:22:30

【问题描述】：

我有一个指令，当我滚动时它会执行一个动作。

@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');
    

【问题讨论】：

重复调用 setStyle() 有什么问题？

我不认为如果我将 setStyle() 写十五次（背景、高度、宽度、边距、填充...等）到二十个元素，这不是一个“好习惯” .很高兴知道如何在更大的项目中处理它

你得到的数组是因为 getElementsByClassName 可以返回多个元素（注意's'）。为了完整起见，您可以迭代此数组并为所有数组添加类。

【参考方案1】：

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

使用方法见Angular Renderer documentation。

【讨论】：

我试过让 sth = document.getElementsByClassName('oldClass);稍后在 if - this.renderer.addClass('oldClass', 'onScroll');但我收到错误“无法读取未定义的属性‘添加’”

如果它解决了您的问题，请不要忘记点击旁边的复选标记来接受答案。 :-)