Angular 如何在悬停时向元素添加类

<div class="red">On hover add class ".yellow"</div>

import {Component} from 'angular2/core';

@Component({
  selector: 'hello-world',
  templateUrl: 'src/hello_world.html',
  styles: [`
    .red {
      background: red;
    }

    .yellow {
      background: yellow;
    }

  `]
})
export class HelloWorld {
}

[ngClass]="color" (mouseover)="changeStyle($event)" (mouseout)="changeStyle($event)"

color:string = 'red';

changeStyle($event){
  this.color = $event.type == 'mouseover' ? 'yellow' : 'red';
}

[ngClass]="color" (mouseover)="color='yellow'" (mouseout)="color='red'"

Angular相关问答推荐

单元测试 case 模拟store 中的行为主体

try 测试具有Angular material 下拉列表的组件时，在Angular 17中发现&q；错误的意外合成属性@TransitionMessages

使选项卡与父零部件成一定Angular 激活

弯管记忆

角 12 固态继电器 ｜页眉页脚在加载程序到来之前显示

如何以Angular 显示动态视图模型

我想将一个对象传递给一个子组件.我做了一切，但没有任何效果. (Angular )

as和let之间的异步管道区别

异步管道模板中的局部变量(Angular 2+)

模块AppModule导入的意外指令LoginComponent，请添加@NgModule 注释

如何在 Angular2 中的所有请求的请求标头中发送Cookie？

ConnectionBackend 没有提供程序

Angular 2 组件不是任何 NgModule 的一部分

在Angular2 Dart中设置路由和RouterLink的正确方法是什么

无法在 RxJs 6 和 Angular 6 中使用 Observable.of

Angular单元测试输入值

RxJS - 发生错误时观察到的不会完成

包 '@angular/cli' 不是依赖项

升级到 angular-6.x 会给出Uncaught ReferenceError： global is not defined

如何使用 @ngrx/store 获取 State 对象的当前值？