Angular 角度指令：悬停时动态更改img背景_Angular_Typescript_Angular Directive

Angular 角度指令：悬停时动态更改img背景

angular typescript

Angular 角度指令：悬停时动态更改img背景,angular,typescript,angular-directive,Angular,Typescript,Angular Directive,看屏幕截图，我有一个页面的背景图像和文本下方的两个缩略图。当鼠标悬停在缩略图上时，我希望能够将页面的背景图像更改为缩略图图像以下是我的指示。我可以得到缩略图的src，但是我一直在思考如何将其注入元素，以便页面背景发生变化。另外，我已经从ViewChild行中得到了错误预期的2个参数，但得到了1个。从'@angular/core'导入{指令，ElementRef，HostListener，ViewChild}； @指示({ 选择器：“[dynamicBackgroundImg]” }) 导出

看屏幕截图，我有一个页面的背景图像和文本下方的两个缩略图。当鼠标悬停在缩略图上时，我希望能够将页面的背景图像更改为缩略图图像

以下是我的指示。我可以得到缩略图的

src

，但是我一直在思考如何将其注入元素，以便页面背景发生变化。另外，我已经从

ViewChild

行中得到了错误

预期的2个参数，但得到了1个。

从'@angular/core'导入{指令，ElementRef，HostListener，ViewChild}；
@指示({
选择器：“[dynamicBackgroundImg]”
})
导出类DynamicBackgroundImgDirective{
thumbSRC：字符串；
@ViewChild（'tourBackgroundImg'）tourBackgroundImg:ElementRef；
构造函数（私有el:ElementRef）{}
@HostListener（'mouseover'）onMouseOver（）{
this.ChangeBackgroundImg（）；
}
@HostListener（'mouseleave'）onMouseLeave（）{
}
ChangeBackgroundImg（）{
this.thumbSRC=this.el.nativeElement.getAttribute（'src'）；
警报（this.thumbSRC）；
this.tourBackgroundImg.nativeElement.setAttribute（this.thumbImgSrc）；
}
}

您可以在图像上使用事件侦听器来执行此操作：

代码如下：

html:

及TS:

import {
  Component,
  OnInit,
  ElementRef,
  ViewChild,
  Renderer2,
AfterViewInit
} from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements AfterViewInit {
  @ViewChild("myImage") myImage: ElementRef;
  globalInstance: any;

  constructor(private renderer: Renderer2) {}

  ngAfterViewInit() {

    this.globalInstance = this.renderer.listen(
      this.myImage.nativeElement,
      "mouseover",
      () => {
        this.renderer.setStyle(
          document.body.querySelector('.app-component'),
          "background-image",
          `url(${this.myImage.nativeElement.src})`
        );
      }
    );
  }
}

如您所见，其想法是绑定和侦听图像上的事件（此处为“mouseover”事件），并在触发时更改目标（此处为appComponent）的背景。

您可以在图像上使用事件侦听器来执行此操作：

代码如下：

html:

及TS:

import {
  Component,
  OnInit,
  ElementRef,
  ViewChild,
  Renderer2,
AfterViewInit
} from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements AfterViewInit {
  @ViewChild("myImage") myImage: ElementRef;
  globalInstance: any;

  constructor(private renderer: Renderer2) {}

  ngAfterViewInit() {

    this.globalInstance = this.renderer.listen(
      this.myImage.nativeElement,
      "mouseover",
      () => {
        this.renderer.setStyle(
          document.body.querySelector('.app-component'),
          "background-image",
          `url(${this.myImage.nativeElement.src})`
        );
      }
    );
  }
}

如您所见，其想法是绑定和侦听图像上的事件（此处为“mouseover”事件），并在触发时更改目标（此处为appComponent）的背景。

无需在指令中使用

@ViewChild

以下代码应该可以工作：

import { Directive, ElementRef, HostListener, Input, Renderer2 } from '@angular/core';

@Directive({
  selector: '[dynamicBackgroundImg]'
})
export class DynamicBackgroundImgDirective {
  // use the @Input to pass the target image
  @Input() target: HTMLImageElement;

  constructor(private el: ElementRef<HTMLImageElement>, private renderer: Renderer2) {}

  @HostListener('mouseover') onMouseOver() {
    this.ChangeBackgroundImg();
  }

  @HostListener('mouseleave') onMouseLeave() {

  }

  ChangeBackgroundImg() {
     // use the Renderer2 service to set the attribute
     this.renderer.setAttribute(this.target, 'src', this.el.nativeElement.src);
     // Add fade-in css class
    this.renderer.addClass(this.target, 'fade-in');
  }

}

如果在

OnInit

生命周期挂钩中使用，则

静态

属性必须是

true

，否则

false

。在早期版本以及Angular 9中，第二个参数是可选的，除非它未在

ngOnInit

中使用

更新-动画

要设置图像动画，可以使用角度动画或简单的css，如下所示：

.fade-in {
  animation: fadeIn ease 1s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

我在指令中添加了用于在缩略图悬停时添加淡入类的代码。

在指令中不需要使用

@ViewChild