html - 有没有办法突出显示点击的 mat-grid-tile？当动态生成每个 mat-grid-tile 时

Question

我在 UI 的 mat-grid-list 中动态显示 mat-grid-tile，其数量和数据随着后端值的变化而变化。它们是动态生成的。单击任何 mat-grid-tile 都会调用一个函数并将数据传递给它以继续。我想识别已被点击的 mat-grid-tile 并保持突出显示，直到用户被路由到另一个页面。

我已经尝试过 mat-grid-tile:active{background-color: #333} 它会在用户点击时改变背景颜色一秒钟，就像闪光一样，而不是之后。

{{瓷砖名称}}

我希望在用户被踢出该页面或 div 之前的剩余时间内，tile 的输出会以更改后的背景颜色突出显示。

Answer 1

在 html 文件中:

<mat-grid-title (click)="highlight($event)">...</mat-grid-title>

在 ts 文件中:

public highlight(ev) {
  var target = event.target || event.srcElement || event.currentTarget;

  target.classList.add("bg-blue");

  myOldDataProcessingFunction();
}

这样就可以得到元素了。现在您可以设置更改样式或添加另一个类。