Html 如何在angularjs2中的鼠标悬停选项的帮助下通过悬停按钮来闪烁图像？

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

下面是我在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 { }

从'@angular/core'导入{Component}//从角点导入零部件
从“/my.component”导入{MyComponent}//从my.component导入组件
@组成部分({
选择器：“我的应用程序”，
模板：`嗨，伙计！！
`,
指令：[MyComponent]//添加来自mycomponents的指令
})
导出类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);

     }
}

从“@angular/core”导入{Component}；
@组成部分({
选择器：'mytag'，
模板：`click me`//在这里，我试图通过悬停来刷新图像
})
导出类MyComponent{
公众形象=”http://lorempixel.com/400/200";
myclick（荷航）{
控制台日志（klm）；
}
}

---

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

您可以使用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);
         }

}

从'@angular/core'导入{Component}
从“@angular/animations”导入{触发器、状态、样式、转换、动画、关键帧、组}；
从“@angular/platform browser/animations”导入{BrowserAnimationsModule}；
@组成部分({
选择器：'mytag'，
模板：`单击我
`
,
动画：[
触发器（“switchImageDisplay”[
状态（“显示”，风格({
显示：“块”
})),
状态（“隐藏”，样式({
显示：“无”
})),
转换（'show hide'，[animate（'0s'）]），
])
]
})
导出类SwitchDisplayComponent{
公众形象=”http://lorempixel.com/400/200";
publicshowimage:string；
toggleOnOff（）{
console.log（“以前的显示值为”，this.showImage）；
this.showImage=（this.showImage==“显示”）？“隐藏”：“显示”；
console.log（“当前显示值为”，this.showImage）；
}
}

说明： 函数的作用是：将字符串变量showImage设置为show和hide。 在动画中，我们创建一个触发器并给它命名。在本例中，我们将其命名为“switchImageDisplay”。我们在动画触发器中声明了两种状态，即“显示”和“隐藏”。在这些州，我们定义了要使用的CSS。最后，我们定义了一个转换，它是两种绑定方式，在0秒内执行。如果要在一段时间内隐藏图像，请增加时间

在模板代码中，我们使用代码[@switchImageDisplay]=“showImage”将img标记绑定到动画。根据“showImage”值，定义动画“switchImageDisplay”的状态

从“@angular/platform browser/animations”导入导入{BrowserAnimationsModule}；在app.module.ts和导入阵列中