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

Question

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

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

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

然而，背景没有改变。

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

角度应用程序/src/app/users/profile/profile.component.css

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

角度应用程序/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="";
  }

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

我将处理一个 plunker 并在完成后链接到该文件作为编辑