我有一个div,当它被悬停时,背景颜色会改变,我还需要根据组件中的一个元素选择颜色。
<div *ngFor="let u of users;" [style:hover.background-color] = "u.selected ? 'red' : 'blue' "> </div>
P粉5205457532023-09-13 00:19:30
从上面的评论链接中:
"实际上这不是一个Angular问题:伪元素不是DOM树的一部分,因此不会暴露任何可以用来与它们交互的DOM API。"
所以你可以使用CSS变量来代替:
样式文件:
.highlight:hover { background-color: var(--highlight-color); }
模板:
<div class="highlight" *ngFor="let u of users;" [ngStyle] = "{'--highlight-color': u.selected ? 'red' : 'blue'} "> {{ u.name }} </div>