在指令中为CSS类添加值

Question

我在项目中使用Angular 10。

我有指令：

@Directive({
selector: '[appHoverImage]'
})
export class HoverImageDirective {
constructor(private elementRef:ElementRef, private renderer: Renderer2) { }
@HostListener("mouseenter") onMouseEnter(){
const imageurl = this.elementRef.nativeElement.getAttribute('src');

//put imageurl to the background-image of the expand-image css class.

this.renderer.addClass(this.elementRef.nativeElement, "expand-image");
}
@HostListener("mouseleave") onMouseLeave(){
this.renderer.removeClass(this.elementRef.nativeElement, "expand-image");
}
}

这里是扩展图像css类：

.expand-image
{
background-image:''
margin: 150px;
width: 30%;
height: 30%;
position: fixed;
top: 50%;
left: 50%;
background-color: white;
border: 1px solid black;
transform: scale(3); /* Standard syntax */
z-index:999;
}

正如您在MouseEnter函数上看到的那样，我从DOM图像URL中提取并将其放入图像变量中。然后，我将展开图像类附加到鼠标悬停所在的元素上。

我的问题是如何将imageurl的值添加到expand-imageCSS类的background-image属性中？

Answer 1

您可以尝试创建一个自定义CSS标记，通过设置背景图像url来编辑.expand-image属性。可能如下：

@Directive({
selector: '[appHoverImage]'
})
export class HoverImageDirective {
private CSSElement: HTMLStyleElement;
private CSSId: string;
constructor(
private elementRef: ElementRef,
private renderer: Renderer2
) {
this.CSSElement = document.createElement('style');
document.head.append(this.CSSElement);
}
@HostListener("mouseenter") onMouseEnter() {
const nativeElement = this.elementRef.nativeElement;
const imageurl = nativeElement.getAttribute('src');
this.CSSElement.innerHTML = `.expand-image {
background-image: url(${imageUrl});
}`
//put imageurl to the background-image of the expand-image css class.
this.renderer.addClass(nativeElement, "expand-image");
}
@HostListener("mouseleave") onMouseLeave() {
this.CSSElement.innerHTML = '';
const nativeElement = this.elementRef.nativeElement;
this.renderer.removeClass(nativeElement, "expand-image");
}
}

基本上，您的指令将创建一个<style>标记，您可以通过使用.innerHTML属性并为类设置背景url来直接编辑该标记。您还可以取消当前存在于CSS文件中的background-image规则。

我无法测试它，但它应该可以工作。

否则，您可以查看Javascript的.insertRule方法，但需要首先选择样式表。

查看相关文档以了解更多关于此其他选项的信息，您可以尝试

Answer 2

我认为您可以使用Renderer2的setStyle API来实现您所需要的：

this.renderer.setStyle(this.elementRef.nativeElement, "background-image", imageurl);

在mouseleave上，您可以删除样式(通过将以前的值保存为指令中的状态，或者将其设置为null，然后在mouseleave上重置为该状态(