Angular 2: Hover-Eigenschaften mithilfe von ngStyle festlegen

Question

Ich versuche, die Hover-Eigenschaftszustände mithilfe von [ngStyle] festzulegen. Im Folgenden werden nur die normalen Statusfarben festgelegt. Wenn ich die Maus über die Schaltfläche bewege, ändert sich die Schaltfläche nicht wie erwartet in die gedrückten Farben.

<button (click)="logout()" 
        class="btn register-button" 
        [ngStyle]=" hover ? {'color': theme.logoutButtonColorPressed, 
           'border-color': theme.logoutButtonBorderColorPressed, 
           'background-color': theme.logoutButtonBackgroundColorPressed } : 

           {'color': theme.logoutButtonColorNormal, 
           'border-color': theme.logoutButtonBorderColorNormal, 
           'background-color': theme.logoutButtonBackgroundColorNormal }">Logout</button> 

Answer 1

:hover ist eine Pseudo-Klasse, ist es nicht hinzugefügt style verwendet werden kann. Sie sollten CSS und ngClass oder [class.xxxx]=".." verwenden.

Answer 2

Wenn Sie Stile wechseln möchten auf schweben, auf die Taste, um die folgenden Add

<button (mouseover)="hover=true" (mouseleave)="hover=false"... 

Answer 3

Wenn Sie in der Notwendigkeit der Auswahl der einzelnen Tasten durch Ändern ngstyle sind, ist es das, was ich tat.

btn.component.html

<div *ngIf="socketData && socketData.status === 'ok'"> 
    <div *ngFor="let button of socketData.message; let i = index" 
     [ngStyle]="hovered === i ? pressedStyle(button) : buttonStyle(button)" 
     (mouseover)="hovered = i" 
     (mouseout)="hovered = -1" 
     (click)="reqTicket(button.id)"> 

     {{button.someImportantData}} - {{button.yetMoreImportantData}} 
    </div> 
</div> 

btn.component.ts

export class ButtonComponent implements OnInit { 
    style; 
    hovered; 

    ... 

    private buttonStyle(button) { 
     let btnType = this.setBtnType(button); 

     this.style = { 
      'color': '#' + button.textColor, 
      'font-size': button.textSize + 'px', 
      'background-color': btnType.background 
     }; 
     return this.style; 
    } 

    private pressedStyle(button) { 
     let pressed = this.setBtnType(button, this.hovered); 
     this.style['background-color'] = pressed.background; 

     return this.style; 
    } 

    private setBtnType(button, hovered?) { 
     let type = 'normal'; 
     let btn = { 
      normal: { 
       background: '#' + button.backColor, 
      }, 
      pressed: { 
       background: '#' + button.backColor, 

      } 
     } 

     if(hovered > -1) type = 'pressed'; 

     return { 
      border: btn[type].width + ' ' + btn[type].color + ' ' + 'solid', 
      background: btn[type].background 
     }; 
    } 

}

Hoffnung hilft dieses jemand :)