css - 有没有办法在不实时重新加载的情况下更改背景图像？

Question

我实际上正在尝试为英雄联盟锦标赛制作 Angular 选禁叠加层，但我面临一些基本问题，我不确定是否可以完成。我的问题是:我可以在不重新加载组件的情况下动态更改 div 背景吗？

在 pick-ban-component.html 中:

<div class="blueTeam">
   <app-player-card *ngFor="let player of blueTeam" [bluePlayer]="player"></app-player-card>
</div>

在 pick-ban-component.ts 中:

public blueTeam = [{
        name: 'playerOne',
        champion: 'Teemo',
        spells: ['Flash', 'Burn']
    },...
];

在 player-card.html 中:

<div [ngClass]="bluePlayer ? 'bluePlayerCard bluePlayer.champion' : redPlayer ? 'redPlayerCard redPlayer.champion' : 'noSelection'"></div>

在 player-card.css 中:

.Teemo {
    background-image: url('../../assets/champions/Teemo_0.jpg') !important;
    background-size: cover;
    background-position: top center;
}...

我的 player-card.css 中每个冠军的注册方式都与提莫相同。所以我想知道如果我将 playerOne 的冠军更改为另一个冠军，但仍然提供背景更改，是否有办法避免组件重新加载？

Answer 1

在您的情况下，最简单的解决方案是更改此行:

<div [ngClass]="bluePlayer ? 'bluePlayerCard bluePlayer.champion' : redPlayer ? 'redPlayerCard redPlayer.champion' : 'noSelection'"></div>

为此:

<div [ngClass]="bluePlayer ? 'bluePlayerCard ' + bluePlayer.champion : redPlayer ? 'redPlayerCard ' + redPlayer.champion : 'noSelection'"></div>