-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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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