कोणीय 2: ngStyle

Question

का उपयोग कर होवर गुण सेट करें मैं [ngStyle] का उपयोग कर होवर प्रॉपर्टी स्टेटस सेट करने का प्रयास कर रहा हूं। निम्नलिखित केवल सामान्य राज्य रंग सेट करता है। जब मैं बटन पर माउस करता हूं, तो बटन दबाए गए रंगों में अपेक्षित रूप से परिवर्तित नहीं होता है।

<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 एक छद्म वर्ग है, यह style का उपयोग कर जोड़ा नहीं जा सकता। आपको सीएसएस और ngClass या [class.xxxx]=".." का उपयोग करना चाहिए।

Answer 2

आप हॉवर पर शैलियों स्विच करना चाहते हैं, तो आप ngstyle बदलकर अलग-अलग बटन का चयन करने की जरूरत में हैं, तो बटन

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

Answer 3

के लिए निम्न जोड़ते हैं, यह मैं क्या किया है।

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 
     }; 
    } 

}

आशा इस मदद करता है किसी को :)