将背景应用于元素：使用 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 但我不知道如何指定 :after

<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 上的第一个答案，请耐心等待！