如何使用Angular 6多次动态更改图像背景

问题描述 投票:0回答:1

我有一个步进器表单(在其中填写一些字段,然后单击下一步,出现其他一些字段,但它的组成部分相同),我希望每个步骤都有不同的背景。这意味着每次用户单击按钮时,背景图像都必须更改。

为了实现这一目标,我考虑过像这样使用@HostingBinding

@HostBinding('style.background-image')
bg_image = 'url(image_1.png)';

然后,我希望用户每次单击按钮时都会触发这样的方法:

changeBg(img): void {
    bg_image = 'url(img.png)';
}

上面是伪代码,因为我在整个过程中还有其他逻辑,但是要点是,一旦调用该方法,background-image应该更新。在html上,我有:

<div class="page-layout simple fullwidth"
 [ngStyle]="{ 'background': bg_image }">     

而且在一定程度上可行。我设置了一个初始图像,并且第一次触发该方法后,背景图像就会更新。问题在于,第二次以后,该方法被调用,background-image属性似乎添加了新图像,而不是替换了它。因此,我触发该方法的次数越多,向背景图像添加/堆叠的图像就越多(我可以看到所有图像,因为它们都是要重复的图案)。

为了解决该问题,我首先尝试像这样清除属性:

changeBg(img): void {
    bg_image = '';
    bg_image = 'url(img)';
}

这不起作用。如果我愿意的话,很有趣:

changeBg(img): void {
    bg_image = '';
}

背景图像消失。有关如何解决此问题的任何建议?

angular angular-material
1个回答
0
投票

如果要使用bg_image = 'https://picsum.photos/200/300'之类的图像。您需要在模板中执行

[ngStyle]="{ 'background': 'url(' + bg_image + ')' }"

[如果您将图像用作as

changeBg(img): void {
    bg_image = `url(${img})`;
}

您需要在模板中执行[ngStyle]="{ 'background': bg_image }"

© www.soinside.com 2019 - 2024. All rights reserved.