Angular 角度2：使用ngStyle设置悬停属性

我正在尝试使用[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>

注销

：hover

是一个伪类，不能使用

样式添加它。您应该使用CSS和
ngClass
或
[class.xxxx]=”。“
如果您想在悬停状态下切换样式，请在按钮上添加以下内容

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

如果您需要通过更改ngstyle来选择单个按钮，我就是这么做的

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>

}

希望这对某人有所帮助：）
什么是
hover
这里
[ngStyle]=“hover{
？不清楚您想要什么。如果您想在hover上切换样式，请将以下内容添加到按钮
我正在尝试复制CSS….注销容器按钮：hover{}希望为悬停状态的按钮设置颜色。我可以使用手动设置。注销容器按钮：悬停{color:#ffffffff！重要；背景颜色：rgba（0,0,0,0.00）！重要；边框颜色：#FFFFFF！重要；}你的解决方案很管用：解决方案如下：我将其发布为。如果有帮助，你可以向上投票或接受它。你认为他为什么要设置
：hover
？我在想，当hoveredButton有两种以上状态时，他想更改按钮样式：正常、悬停、聚焦、禁用、活动。当前使用
ngStyle
最终将失败。我使用了它的一个变体，但在我的模型中添加了hover属性，因为我没有将每个项作为单独的组件。
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
        };
    }