如何在Angular 2中设置事件目标的样式？

Question

我在this blog (section 3, event binding)中添加了一个偶数监听器，并在我的类中定义了我在进入和退出鼠标时获得命中的组件。

<p class="title" (mouseenter)="unfold($event)" (mouseleave)="fold($event)">...</p>

我还在控制台中检查了该元素是我期望的，并且可以使用以下jQuery脚本访问它的子元素。

$(event.target)
  .children("p.title")
  .css("display", "block");

然而，当我进入我正在连接到我的听众的折叠功能时，它并不顺利。我对Angular（尤其是Angular2）很新，所以我的猜测是我做错了，jQuery根本不应该被使用。我该怎么用来设置我的组件的类？

unfold(event) {
  console.log("unfold");
  event.target
    .findTheTitleSomehow()
    .andAddCssToIt();
}

Answer 1

如果要在Angular2中动态切换类名，可以使用属性双向绑定。只需将“class”属性绑定到组件类中的变量即可。

示例：

<p [class]="foldClass" (mouseenter)="unfold($event)" (mouseleave)="fold($event)">...</p>

在你的component.ts

中

flodClass:string = '';
flod(e) {
  this.foldClass = 'example-flod-class';
}
unflod(e) {
  this.foldClass = 'example-unflod-class';
}