在特定组件角度设置背景图像答案

【问题标题】：setting background image on particular component angular在特定组件角度设置背景图像
【发布时间】：2018-05-31 15:04:14
【问题描述】：

如何为特定的角度组件设置背景图像？不适用于整个应用程序。我怎样才能做到这一点。我见过 index.html 的实现，但它适用于整个应用程序

<div class="navbar navbar-default">
  <div class="container">
    <div id="navbar-main">
      <ul class="nav navbar-nav">
        <li><a routerLink="/">Home</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li *ngIf="!auth.isLoggedIn()"><a routerLink="/login">Sign in</a></li>
        <li *ngIf="!auth.isLoggedIn()"><a routerLink="/register">Sign up</a></li>
        <li *ngIf="auth.isLoggedIn()">
          <a routerLink="/profile">{{ auth.getUserDetails()?.name }}</a>
        </li>
        <li *ngIf="auth.isLoggedIn()"><a (click)="auth.logout()">Logout</a></li>
      </ul>
    </div>
  </div>
</div>

我想为路由器插座组件设置背景图片

<router-outlet></router-outlet>

【问题讨论】：

这是你需要背景的组件吗？
是的，这是 router-outlet 间接引用 home 组件的主要组件，我必须在 home 组件上设置背景图像，它将位于导航下方
我相信您需要将它设置在您正在加载到路由器插座的组件上，而不是家庭组件上。例如登录组件或注册。
关于主要部分我要写什么你能告诉我吗

标签： css angular

【解决方案1】：

您可以尝试将所有内容包含在div 中，该div 将包含您希望拥有背景的每个组件上的所有内容并设置其background:url('')。例如库存组件和订单组件。

在库存和订单组件中，创建一个包含内容的 div。

<div class="inventory-body">
Some Contents Here...
</div>

然后在 Inventory and Order Component css 中设置它的background

.inventory-body{
  color:white;
  padding: 20px;
  background: url('image/directory');
}

请查看此链接以获取实时示例代码。 https://stackblitz.com/edit/so-answer-ng-routebg

【讨论】：