如何为Angular组件设置背景图像？

Question

在我的角度应用程序中，我想为特定视图设置背景图像。

为此，我将以下内容添加到组件的css文件中：

body {
       background-image: url("../../../assets/images/backgroundImage.jpg");
   }

但是，背景不会改变。

这是包含上面显示的css代码的文件的文件路径：

angular-app / src / app / users / profile / profile.component.css

...这是背景图片的文件路径：

angular-app / src / assets / images / backgroundImage.jpg

---

我也尝试过

body {
       background-image: url("assets/images/backgroundImage.jpg");
   }

...但是这会在编译过程中产生警告，并且也不起作用。

我在做什么错了？

---

我给了根元素类“ root”，然后将以下内容放入css文件中：

.root {
   background-image: url("../../../assets/images/backgroundImage.jpg");
}

...现在背景改变了，但屏幕的整个垂直长度都没有改变（下部保持白色）：

Answer 1

根据Angular，@Component元数据中指定的样式仅适用于该组件的模板。

您可以使用这种黑客手段

在您的styless.css文件中添加

.selector {
       background-image: url("../../../assets/images/backgroundImage.jpg");
   }

现在您可以在组件中执行此操作

ngOnInit() {
    document.body.className = "selector";
  }

ngOnDestroy(){
    document.body.className="";
  }

但是强烈不建议这样做，我不知道您的代码是什么样子，但是必须有另一种方法。

1. 缩放组件以适合整个视口
2. 在组件上设置背景

我将研究插销，并在完成后链接到此文件作为编辑

Answer 2

我将为此添加另一个答案，因为它与我之前的答案完全不同

在组件中从ViewEncapsulation导入angular/core

import { ..., ViewEncapsulation } from '@angular/core';

在您的@component元标记中，添加encapsulation: ViewEncapsulation.None,

@Component({
  ...
  encapsulation: ViewEncapsulation.None,
  ...
})

但这有副作用，一旦加载，组件中的所有样式将对所有其他组件可用。

您可以在Angular页上查看有关此内容的更多信息

Answer 3

您可能需要创建服务或使用ngrx在子组件和app.component之间进行通信，以使用ngClass切换app.component.html的样式。