Как я могу динамически загрузить изображение в теге body в каждом компоненте?

Question

Я новичок в Angular, я пытался создать этот пример, чтобы я понял. Мне бы хотелось, чтобы при переходе от одного компонента к другому динамически загружалось фоновое изображение в тег body, я не знаю, почему оно не загружается.

В каждом компоненте, который я включаю в раздел styles, изображение, которое я хочу изменить для тела каждого компонента.

Или что я могу сделать? Я просто хочу иметь другое фоновое изображение для компонентов, которые загружены в мой маршрутизатор-розетку (в моем случае, mainComponent и anotherComponent)

Это мой код:

  @Component({
    selector: 'another',
    template: '<a routerLink="/">main</a>',
    styles: [`body {
     position: fixed;
     min-width: 100%;
     background-image: url("https://source.unsplash.com/1920x1080?landscape") !important;
     background-repeat: no-repeat;
     background-size: 100%;
     background-position: center;
     background-size: cover;
    }`]

второй компонент:

@Component({
  selector: 'main',
  template: '<a routerLink="/another">anotherComponent</a>',
  styles: [`body {
      position: fixed;
      min-width: 100%;
      background-image: url("https://source.unsplash.com/1920x1080?stars") !important;
      background-repeat: no-repeat;
      background-size: 100%;
    background-position: center;
      background-size: cover;
}`]

Это живой код:

https://stackblitz.com/edit/angular-9kbx4q

Answer 1

В Angular вы не можете перезаписывать родительские стили из стилей компонентов, потому что стили вашего компонента инкапсулированы и работают только для вашего компонента.

Вы должны добавить encapsulation: ViewEncapsulation.None к @Componentn({}) -определению в каждом компоненте, где вы хотите переопределить css для тега body.

Вот рабочий пример:

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

@Component({
    selector: 'another',
    template: '<a routerLink="/">main</a>',
    styles: [`body {
    position: fixed;
    min-width: 100%;
    background-image: url("https://source.unsplash.com/1920x1080?landscape") !important;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    background-size: cover;
    }`],
    encapsulation: ViewEncapsulation.None
})
export class AnotherComponent  {
  constructor(){}
}

Важно: Отключив инкапсуляцию, стили компонентов будут приняты глобальными и будут переопределять стили с теми же классами, идентификаторами или тегами.

Подсказка: Вы можете использовать это решение, но будет лучше, если вы установите фоновое изображение для собственных тегов html компонентов.

Лучшее решение для вашего случая использования:

Добавьте div обертки в шаблон компонентов another и main. Затем добавьте свои стили к этому div обертки. Как это:

another.component.ts

@Component({
  selector: 'another',
  template: '<div><a routerLink="/">main</a></div>',
  styles: [`div {
    position: fixed;
    min-width: 100%;
    background-image: url("https://source.unsplash.com/1920x1080?landscape") !important;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    background-size: cover;
  }`]
})

main.component.ts

@Component({
  selector: 'main',
  template: '<div><a routerLink="/another">anotherComponent</a></div>',
  styles: [`div {
    position: fixed;
    min-width: 100%;
    background-image: url("https://source.unsplash.com/1920x1080?stars") !important;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    background-size: cover;
  }`]
})

Вот рабочий пример stackblitz .

Подробнее о ViewEncapsulation на угловых документах .

Answer 2

Если я понимаю ваш вопрос, вы пытаетесь загрузить одно и то же фоновое изображение в шаблон компонента при его инициализации?Angular работает на основе иерархии шаблонов, поэтому общие элементы, такие как фоновое изображение, должны быть реализованы в шаблонах более высокого уровня.Я бы посмотрел на загрузку этого изображения в шаблоне app.component.