如何为 Angular 组件设置背景图片？答案

【问题标题】：How to set background image for Angular component?如何为 Angular 组件设置背景图片？
【发布时间】：2018-08-22 16:27:32
【问题描述】：

在我的 Angular 应用中，我想为特定视图设置背景图像。

为此，我在一个组件的 css-file 中添加了以下内容：

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");
}

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

【问题讨论】：

如果你想让它应用到body标签，把它放在styles.css
但是它将应用于所有组件/视图，不是吗？ ...我希望它只应用于这个特定的视图
然后你需要将它应用到该组件的根标签，即如果你的HTML文件中的第一行是<div id="test" />，那么你应该将它应用到#test。当 Angular 构建应用程序时，它会应用称为 ViewEncapsulation 的东西，因此组件 CSS 文件中的 CSS 将（通常）仅适用于该特定组件中的 HTML
你……现在背景是可见的……但仅适用于部分屏幕（请参阅我的帖子的更新）
对于不填满整个屏幕添加这个html, body { margin: 0; height: 100%; }

【解决方案1】：

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

你可以使用这样的技巧

在你的 styless.css 文件中添加这个

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

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

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

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

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

我将在 plunker 上工作，并在完成后链接到此文件作为编辑

【讨论】：

谢谢你的回答......不幸的是，当我将 .selector 放入 styles.css 文件时，url 无法再解析......（我也尝试使用'background- image: url("./assets/images/backgroundImage.jpg");' 但这也不起作用

【解决方案2】：

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

在您的组件中从 angular/core 导入 ViewEncapsulation

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

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

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

这有一个副作用，一旦加载，组件中的所有样式都将可供所有其他组件使用。

您可以在Angular 页面上查看更多信息

【讨论】：

【解决方案3】：

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

【讨论】：