如何为Angular组件设置背景图像？-Java 学习之路

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

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

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

但是，背景不会改变 .

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

角应用程序/ SRC /应用程序/用户/简档/ profile.component.css

...这是background-image的文件路径：

角应用程序/ SRC /资产/图像/ backgroundImage.jpg

我也试过了

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

...但是这会在编译期间产生警告，但也无法正常工作 .

我究竟做错了什么？

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

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

...现在背景改变但不是屏幕的整个垂直长度（下部保持白色）：

enter image description here

3 回答

0

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

回复于 2024-05-08T21:53:35+08:00
1
根据Angular， @Component 元数据中指定的样式仅适用于该组件的模板 .

你可以使用像这样的黑客

在 styless.css 文件中添加此项
```
.selector {
       background-image: url("../../../assets/images/backgroundImage.jpg");
   }
```
现在在您的组件中，您可以执行此操作
```
ngOnInit() {
    document.body.className = "selector";
  }

ngOnDestroy(){
    document.body.className="";
  }
```
但这是非常不推荐的，我不知道你的代码是什么样的，但必须有另一种方式 .
- 缩放组件以适合整个视口
- 设置组件的背景
我将处理一个plunker并在完成时编辑链接到此文件
回复于 2024-05-08T21:53:35+08:00
1
我将为此添加另一个答案，因为它与我之前的答案完全不同

在您的组件中从 angular/core 导入 ViewEncapsulation
```
import { ..., ViewEncapsulation } from '@angular/core';
```
在你的@component metatag中添加 encapsulation: ViewEncapsulation.None,
```
@Component({
  ...
  encapsulation: ViewEncapsulation.None,
  ...
})
```
这有副作用，组件中的所有样式一旦加载就可供所有其他组件使用 .

您可以在Angular页面上查看更多相关信息
回复于 2024-05-08T21:53:35+08:00