Question

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

Answer 1

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

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

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

然后在库存和订单组件css中设置其background

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

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

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

1 个答案: