установка фонового изображения на определенный угловой компонент

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('') ,.Например, компонент инвентаризации и компонент заказа.

В Inventory and Order Component создайте div, который содержит содержимое.

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

Затем в Inventory and Order Component установите его background

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

Пожалуйста, смотрите эту ссылку для живого примера кода.https://stackblitz.com/edit/so-answer-ng-routebg