将背景应用于元素：使用ngStyle动态后

Question

我将背景应用于div，如下所示：

<div class="bgimg">test</div>

.bgimg {
  padding-top: 10px;
  &::after {
    background: url('/assets/img/test.png') no-repeat center center;
  }
}

图像的路径是动态的，并存储在组件中：

export class MyComponent {

  myImage: string = "/assets/img/test.png";

所以对于我的div元素我想应用一个ngStyle，但我不知道如何指定：之后

<div
  [ngStyle]="background: url('{myImage}') no-repeat center center;">
  test
</div>

Answer 1

通过使用::after伪类，您不会将背景应用于父div或任何其他元素。目前尚不清楚为什么要使用::after来显示背景。

1. 您需要包含ng-style，例如：<div ng-style="bgimg">test</div>，以便Angular可以引用该元素。
2. 完成后，您可以调用bgimg={'background-image':'url(myImage)'}，然后将背景应用于引用的元素。

有关详细信息，请查看此Angular documentation以及您可以使用的此example code。我希望这会有所帮助，但这是我在StackOverflow上的第一个答案，所以请耐心等待我！