Question

我实际上是在为《英雄联盟》锦标赛制作一个Angular Pick＆ban覆盖图，但是我遇到了一些基本问题，我不确定是否可以做到。我的问题是：是否可以在不重新加载组件的情况下动态更改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;
}...

我的玩家card.css中的每个冠军都注册了与Teemo相同的方式。因此，我想知道如果我将playerOne的拥护者更改为另一个拥护者，但仍然提供背景更改的话，是否可以避免组件重新加载？

Answer 1

您可以使用ngStyle

gender

Answer 2

对于您而言，最简单的解决方案是更改此行：

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

对此：

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

有没有一种方法可以在不实时重新加载的情况下更改背景图像？

2 个答案: