-1

estoy probando a cambiar el background-image de mi body dependiendo del componente en el que este situado, por ejemplo si estoy con el componente login tendrá un background-image y si estoy en el componente registro tendra otro background-image distinto, probé a poner el body {} en cada componente pero no funciona...

5 respuestas 5

1

Puedes usar la directiva [ngStyle] y en tu controller con el ActivatedRoute conoces la ruta y creas una funcion donde le pasas la ruta; podria ser algo asi:

En el constructor, seria algo asi:

public path: any = [];
constructor(private activate: ActivatedRoute){
    this.activate.url.subscribe(data => {
        this.path = data[0].path;
    });
    this.getImage();
}

 getImage() {
    switch (this.path) {
      case 'login':
        return './assets/images/xxx.png';
      case 'home':
        return './assets/images/yyy.png';
      case '':
        return './assets/images/zzz.png';
    }
  }

en tu archivo html, seria algo asi:

<div [ngStyle]="{'background-url':getImage()}">...</div>
0

prueba a poner en el fichero de estilos que te crea angular CLI lo siguiente.

app-nombreComponente{
   background-image: ...
}
1
  • no me funcionó, probe con el appcomponent y nada el 6 feb. 2020 a las 15:04
0

Una opción puede ser dependiendo de la ruta activa.

routerLinkActive="active"

Suponiendo que la ruta activa sea

routerLink="/login"

Pues poner un id que cambie el color en el css principal o directamente un style en el elemento, aunque esta es más chapuza si tienes que validar en código html y css.

    <h1 routerLinkActive="active" routerLink="/login" id="cambiarFondo">Inicio de sesión</h1>
0

Esto me dio algo de guerra, pero logre encontrar resultado.

Primero en tu app component importa los servicios de subscribe para saber en que ruta estas, a su vez importa Inject y Document para acceder a la etiqueta body

import { DOCUMENT } from '@angular/common';
import { Component, OnInit, Inject } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { filter, Subscription } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  public subscriber: Subscription | undefined;

  constructor(private router: Router, @Inject(DOCUMENT) private document: any){ }

  ngOnInit(): void {
    this.subscriber = this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: any) => {
       console.log('The URL changed to: ' + event['url'])
       if(event['url']==='/login' ||  event['url']==='/singUp'){
        this.document.body.classList.remove('bg2');
        this.document.body.classList.add('bg1');
      }else{
        this.document.body.classList.remove('bg1');
        this.document.body.classList.add('bg2');
      }

    });
  }

  ngOnDestroy () {
    this.subscriber?.unsubscribe();
  }
}

recuerda crear clases segun el background necesario con classList.remove('tu_clase') remueves una clase (si no existe no hay problema no existe error) y luego agrega una clase con classList.add('tu_clase')

estas clases deben ser definidas en el archivo styles.css

-1

modifica el archivo html de tu componente y tambien el archivo css de la siguiente forma

body#tren{
  background-image: url("../../../assets/Fondos/interactiv mosaico.svg");
  padding-bottom: 100%;
}
<body id="tren">
  <div class="container  d-flex align-items-center" id="Tren">

  </div>

</body>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.