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

事实上，我正在尝试为传奇联盟锦标赛制作一个角度上的选择和禁止覆盖，但我面临一些基本问题，我甚至不确定是否可以做到。我的问题是：我能在不重新加载组件的情况下动态更改div背景吗

在pick-ban-component.html中：

在pick-ban-component.ts中：

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

在player-card.html中：

在player-card.css中：

.Teemo{
背景图片：url（'../../assets/champions/Teemo_0.jpg'）！重要；
背景尺寸：封面；
背景位置：上中；
}...

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

您可以使用ngStyle

<div class='Teemo' [ngStyle]="{'background-image': 'url(' + myBackground + ')' }"></div>

---

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

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

为此：

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

你能提供一个堆栈吗？我能在不重新加载组件的情况下动态更改div背景吗？--是的，你可以。什么是

player card.html

中的

bluePlayer

？我没有使用StackBlitz，但我可以共享我的GitHub repo：我使用两个空变量启动player-card.ts:@Input（）bluePlayer@输入（）红色播放器；所以我可以根据团队颜色更改类和css。