我如何通過在angularjs2中使用mouseover選項將鼠標懸停在按鈕上來閃爍圖像？

Question

我想要做的是，當我將鼠標懸停在“單擊我”按鈕上時，它應該在網頁上顯示一個圖像，而當我將其懸停時，它不應在mouseover選項的幫助下顯示任何圖像

這是我嘗試在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設置為show和hide。 在“動畫”中，我們創建一個觸發器並為其命名。 在我們的例子中，我們將其命名為“ switchImageDisplay”。 我們在動畫觸發器中聲明了兩個狀態：“顯示”和“隱藏”。 在這些狀態下，我們定義了要使用的CSS。 最后，我們定義了一個過渡，該過渡是2種方式綁定的，並且在0秒內執行。 如果要在一段時間后隱藏圖像，請增加時間。

在模板代碼中，我們已使用代碼[@switchImageDisplay] =“ showImage”將img標簽綁定到動畫。 基於“ showImage”值，定義動畫“ switchImageDisplay”的狀態。

從“ @ angular / platform-b​​rowser / animations”導入導入{BrowserAnimationsModule}； 在app.module.ts和imports數組中。