如何仅在角度 6 中为特定组件设置背景图像答案

【问题标题】：How to set the background image only for a particular component in angular 6如何仅在角度 6 中为特定组件设置背景图像
【发布时间】：2019-01-01 20:52:09
【问题描述】：

我创建了一个名为 login 的新组件，我必须为该组件（login.component.html）设置背景图像，仅适用于该组件。我尝试了堆栈溢出中提供的许多解决方案。但图像未设置为身体的全高。以下是我的项目文件。

index.html

   <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <base href="/">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" type="image/x-icon" href="favicon.ico">
     </head>
     <body>
      <app-root></app-root>
     </body>
   </html>

app.component.html

    <router-outlet></router-outlet>

app.module.ts

   import { BrowserModule } from '@angular/platform-browser';
   import { NgModule } from '@angular/core';
   import { AppComponent } from './app.component';
   import { LoginComponent } from './login/login.component';

   @Component({
     AppComponent,
     LoginComponent
   })
   imports: [
     BrowserModule,
     RouterModule.forRoot([
       { path: '', pathMatch: 'full', redirectTo: 'login' },
       { path: 'login', component: LoginComponent },

           ])

          ],
        providers: [],
        bootstrap: [AppComponent]
             })

       export class AppModule { }

    <div class="inventory-body">
        <!--content goes here-->
    </div>

    .inventory-body {
    margin: 20px 0px;
    color: white;
    padding: 20px;
    height:auto;
    background-image: url('/assets/img/1.jpg');
     }

这里是 login.component.ts 文件

    import { Component, OnInit } from '@angular/core';

    @Component({
      selector: 'app-login',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.css']
     })
   export class LoginComponent implements OnInit {

    constructor() { }

    ngOnInit() {

      }

     }

【问题讨论】：

你也可以发布 login.component.ts 文件吗
我已经发布了 login.component.ts 文件
是因为您将高度设置为自动。尝试为高度指定一个固定值。
测试尝试使用 app.component.html 中的选择器，并在 login.component.css 中将高度和宽度设为 100%
我尝试给出固定的高度值，但它在重复，我已经停止了 css background-repeat:no-repeat;但它并不适合所有设备的相同高度。

标签： css angular angular6

【解决方案1】：

这对我有用：

 constructor(
    private renderer: Renderer2
  ) {
    this.renderer.setStyle(document.body, 'background-image', 'url(/assets/img/mybackgroundimage.png)');
  }

【讨论】：

【解决方案2】：

在全局样式中（style.css）

    html, body, app-root {
     height: 100%;
     margin: 0;
     }

在（login.component.html）

    <body  class="inventory-body">

    </body>

接下来将 css(login.component.css) 写入 (login.component.html) 中的选择器

    .inventory-body {
     position: fixed;
     min-width: 100%;
     background-image: url("/assets/img/img-1.jpg");
     background-repeat: no-repeat;
     background-size: 100%;
     background-position: center;
     background-size: cover;
     }

【讨论】：

【解决方案3】：

如果要设置height: auto，则必须在styles.css（全局css文件）中将html、body、app-root的高度设置为100%。对 app.component.css 中的 app.component 和 login.component.css 中的 login.component 执行相同操作。

Live demo.

【讨论】：

我已经在我的项目中尝试了现场演示代码，仍然图像水平重复，我停止使用 background-repeat:no-repeat;那么该部分将是空的。

【解决方案4】：

.inventory-body {
 position: fixed; 
  top: 0; 
  left: 0;
  min-width: 100%;
  min-height: 100%;
  background-image: url('')
}

【讨论】：