1

如何为角度的特定组件设置背景图像？不适用于整个应用程序。我怎样才能做到这一点。我见过 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>
4

1 回答 1

1

您可以尝试将所有内容包含在 adiv中，它将包含您想要拥有背景的每个组件上的所有内容并设置其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

于 2018-05-31T16:01:46.393 回答