html - 如何借助 angularjs2 中的鼠标悬停选项将鼠标悬停在按钮上来闪烁图像？

Question

我想做的是，当我将鼠标悬停在“单击我”按钮上时，它应该在网页上显示图像，而当我取消悬停时，它不应该在鼠标悬停选项的帮助下显示任何图像

这是我在 app.component.ts 和 my.component.ts 文件中尝试做的

这里是 app.component.ts 的代码:

import { Component } from '@angular/core';     //importing components from angular
import { MyComponent } from './my.component';   //importing components from my.component  



@Component({
     selector: 'my-app',
     template: `<h1> Hi Buddy!! </h1>
          <mytag></mytag>`,
     directives: [MyComponent]         //adding directives from mycomponents
})
export class AppComponent { }

这是 my.component.ts 的代码:

import { Component } from "@angular/core";

@Component({
        selector:'mytag',
        template: `<button (mouseover)="<img [src]="image"> "  >click me</button>`   // here i tried to flash image by hovering
})
export class MyComponent{
      public image="http://lorempixel.com/400/200";
      myclick(klm){
           console.log(klm);

     }
}

那么我应该对 my.component.ts 的类或元数据进行哪些更改才能做到这一点

Answer 1

您可以使用 Angular Animations 模块来实现相同的目的。

对您的 MyComponent 进行以下更改:

import { Component } from '@angular/core'
import { trigger, state, style, transition, animate, keyframes, group } from '@angular/animations';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@Component({
      selector:'mytag',
      template: `<button (mouseover)="toggleOnOff()">click me</button>
                  <img [src]="image" [@switchImageDisplay]="showImage"/>
                  `
      ,
      animations: [
        trigger("switchImageDisplay",[
          state("show", style({
            display : 'block'
          })),
          state("hide", style({
            display : 'none'
          })),
          transition('show <-> hide',[animate('0s')]),
        ])

      ]
    })
export class SwitchDisplayComponent {
      public image="http://lorempixel.com/400/200";
      public showImage : string;
          toggleOnOff(){
            console.log("Previous display value is",this.showImage);
               this.showImage = (this.showImage === "show") ? "hide" : "show";
              console.log("Current display value is",this.showImage);
         }

}

解释:toggleOnOff() 函数将字符串变量 showImage 设置为显示和隐藏。在动画中，我们创建一个触发器并为其命名。在我们的例子中，我们将其命名为“switchImageDisplay”。我们在动画触发器中声明了两个状态，即“显示”和“隐藏”。在这些状态下，我们定义了要使用的 CSS。最后我们定义了一个转换，它是 2 种方式绑定(bind)的，并且在 0 秒内执行。如果您希望图像在一段时间内隐藏，请增加时间。

在模板代码中，我们使用代码 [@switchImageDisplay]="showImage"将 img 标签绑定(bind)到动画。基于“showImage”值，动画“switchImageDisplay”的状态被定义。

从'@angular/platform-b​​rowser/animations'导入导入{BrowserAnimationsModule}；在您的 app.module.ts 和导入数组中。