Блог

Я использую 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:

   .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;
  }
 

Как вы можете видеть в функции OnMouseEnter, я извлекаю URL-адрес изображения DOM и добавляю его в переменную image.
Затем я прикрепляю класс expand-image к элементу, на котором произошло наведение курсора мыши.

Мой вопрос в том, как я могу добавить в CSS-класс expand-image к свойству background-image значение imageurl ?

вы можете попробовать создать пользовательский тег CSS, в котором вы редактируете свое .expand-image свойство, задав URL-адрес фонового изображения. Может быть что-то вроде следующего:

 @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-адрес для вашего класса. Вы также можете избавиться от своего background-image правила, которое в настоящее время присутствует в вашем файле CSS.

Я не смог его протестировать, но он должен работать.

В противном случае вы могли бы взглянуть на .insertRule метод Javascript, но сначала вам нужно будет выбрать таблицу стилей.

Взгляните на соответствующие документы, чтобы узнать больше об этом другом варианте, который вы могли бы попробовать

Я думаю, вы можете использовать setStyle API Renderer2 и достичь того, что вам нужно:

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

и в mouseleave вы можете удалить стиль (либо сохранив предыдущее значение как состояние в директиве, либо установив для него значение null, а затем сбросив его в mouseleave)