如何在Angular 2组件中添加背景图像？

我有一个Angular 2应用程序。在这个应用程序中，我有几个组件。我只想在登录组件中添加背景图像。我该怎么做

body{
    background-image: url('https://s.zkcdn.net/Advertisers/d36ea4926dfa4978ab2556ba7688692c.png') ;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height:100%;

}

---

我有这个登录组件的样式。但它并没有覆盖整个窗户。它只涉及表单部分。

在登录组件的

@Component

装饰器中，您可以添加

样式URL

字段。这样做将允许您仅为登录组件使用样式表

@Component({
  selector: 'your-selector'
  templateUrl: ['path/to/your/html/component'],
  styleUrls: ['path/to/your/stylesheet'],
})

---

然后，您可以在样式表中，仅更改我正在使用的

登录
组件的背景。但爱奥尼亚使用的是有角度的

在我的login.html页面中，我有以下内容：

<ion-content class="background">
 ...
</ion-content>

page-login {
    .background {
        // Path of my picture
        background-image: url('../assets/background.gif');
    }
}

致以最诚挚的问候，
我也面临同样的问题。但下面的代码对我来说很好

在全局css文件（style.css）中添加以下css代码

并在必需的component.ts文件的ngOnInit部分添加以下代码。（例如：login.component.ts）

我用的是angular 7。这就是我如何在组件中获得完整背景图像的方法。
在login.component.html中

<div class="bg-img">

 </div>

不是免费的代码编写服务。您应该尝试自己编写代码。之后，如果你有问题，你可以张贴你已经尝试了一个明确的解释什么是不工作，并提供一个解决方案。我建议你读一个好的问题和答案。另外，请确保使用.body{background image:url（'）；background position:center；background repeat:no repeat；background size:cover；-webkit background size:cover；-moz background size:cover；-o-background-size:cover；height:100%；}我有这个登录组件的样式。但它并没有覆盖整个窗户。它只覆盖表单部分。你可以尝试添加一个
div
来封装你的身体，并设置这个div的背景。不确定为什么会有这个结果，请检查你的组件是如何一个接一个地工作的。但是不管怎样，每当我更改组件时，背景就会卡住，直到我刷新页面。有什么解决方法吗？你可以删除Ngondestry生命周期钩子上的类，这样它就不会在你更改你的component@franpen或者您可以在组件1中：
document.body.classList.remove（'bg-img-login'）；document.body.classList.add（'bg-img-register'）和组件2中的：
document.body.classList.remove（'bg-img-register'）；document.body.classList.add（'bg-img-login'）
和ofc，在父组件中，您必须同时删除它们。嗯，但是您必须在其他每个组件中删除它们，这不是很实用。@Mr.Wizard这就是问题所在，我还没有找到一个实用的解决方案。不过，我回家后会检验你的想法
.bg-img
{
    background-image: url('/assets/images/back.jpg');
    background-position: center;
    background-repeat: no-repeat; 
}

ngOnInit() {
    document.body.classList.add('bg-img');
}

<div class="bg-img">

 </div>

.bg-img{
 min-height: 100vh;
width: 100%;
background: url('../../../src/assets/loginimage.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}