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>

angular ng-style
person user2182570    schedule 18.02.2017    source источник
comment
что hover здесь [ngStyle]=" hover {?   -  person Max Koretskyi    schedule 18.02.2017
comment
не понятно чего ты хочешь. если вы хотите переключать стили при наведении, добавьте к кнопке <button (mouseover)="hover=true" (mouseleave)="hover=false"...   -  person Max Koretskyi    schedule 18.02.2017
comment
Я пытаюсь воспроизвести CSS.... .logout-container button:hover {} в надежде установить цвета кнопки для состояния наведения. Я могу установить их вручную с помощью .logout-container button:hover { color: #FFFFFF !important; background-color: rgba(0, 0, 0, 0.00) !важно; цвет границы: #FFFFFF !важно; }   -  person user2182570    schedule 18.02.2017
comment
Ваше решение работает с удовольствием: решение выглядит следующим образом: ‹button (щелчок)=logout() class=btn register-button (mouseover)=hover=true (mouseleave)=hover=false [ngStyle]= hover? (остальное... стиль как указано выше...)›Выход‹/кнопка›   -  person user2182570    schedule 19.02.2017
comment
Я опубликовал его как ответ. Вы можете проголосовать или принять его, если это помогло.   -  person Max Koretskyi    schedule 19.02.2017
comment
есть ли что-нибудь, что я могу добавить к моему ответу?   -  person Max Koretskyi    schedule 20.02.2017

Ответы (3)


arrow_upward
14
arrow_downward

Если вы хотите переключать стили при наведении, добавьте к кнопке следующее

<button (mouseover)="hover=true" (mouseleave)="hover=false"...
person Max Koretskyi    schedule 19.02.2017

arrow_upward
11
arrow_downward

Если вам нужно выбрать отдельные кнопки, изменив стиль ng, это то, что я сделал.

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

}

Надеюсь, это поможет кому-то :)

person Joseph Briggs    schedule 04.08.2017
comment
Я использовал вариант этого, но добавил свойство hover в свою модель, так как у меня не было каждого элемента в виде отдельного компонента. - person jackofallcode; 14.05.2021

arrow_upward
3
arrow_downward

:hover — это псевдокласс, его нельзя добавить с помощью style. Вы должны использовать CSS и ngClass или [class.xxxx]="..".

person kemsky    schedule 18.02.2017
comment
почему вы думаете, что он хочет установить :hover? Я думал, он хочет изменить стили кнопок при наведении - person Max Koretskyi; 18.02.2017
comment
Кнопка имеет более 2 состояний: нормальное, наведение, сфокусировано, отключено, активно. Текущий подход с ngStyle в конце концов потерпит неудачу. - person kemsky; 18.02.2017