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

Question

In my angular app I would like to set a background image for a specific view.

To this end, I added the following to the css-file of a component:

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

However, the background doesn't change.

This the the file path of the file containing the css-code shown above:

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

... and this is the file path of the background-image:

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

---

I also tried

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

... but this resulted in a warning during compilation and didn't work either.

What am I doing wrong?

---

I gave the root element class "root" and then put the following into the css-file:

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

... now the background changes but not for the whole vertical length of the screen (the lower part remains white):

Answer 1

According to Angular , The styles specified in @Component metadata apply only within the template of that component.

you can use a hack like this

In your styless.css file add this

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

now in your component you can do this

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

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

But this is highly not recommended, i dont know what your code looks like, but there must be another way.

1. Scale your component to fit whole view-port
2. set the background on your component

I will work on a plunker and link to this file as an edit when done

Answer 2

I will add another answer for this because its totaly different from my previous answer

in your component import ViewEncapsulation from angular/core

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

In your @component metatag add encapsulation: ViewEncapsulation.None,

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

This has a side effect though, all styles in your component will be available to all other components once it loads.

You can check more about it on the Angular page

Answer 3

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