web-dev-qa-db-ja.com

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>
angularng-style
9
user2182570

ホバーでスタイルを切り替える場合は、ボタンに以下を追加します

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

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>

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

}

これが誰かを助けることを願っています:)

5
Joseph Briggs

:hoverは疑似クラスであり、styleを使用して追加することはできません。 CSSとngClassまたは[class.xxxx]=".."を使用する必要があります。

1
kemsky