我有一个步进器表单(在其中填写一些字段,然后单击下一步,出现其他一些字段,但它的组成部分相同),我希望每个步骤都有不同的背景。这意味着每次用户单击按钮时,背景图像都必须更改。
为了实现这一目标,我考虑过像这样使用@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 = '';
}
背景图像消失。有关如何解决此问题的任何建议?
如果要使用bg_image = 'https://picsum.photos/200/300'
之类的图像。您需要在模板中执行
[ngStyle]="{ 'background': 'url(' + bg_image + ')' }"
[如果您将图像用作as
changeBg(img): void {
bg_image = `url(${img})`;
}
您需要在模板中执行[ngStyle]="{ 'background': bg_image }"