Estoy trabajando en un componente de inicio de LoginComponent en Angular 2 que debería "cambiar el estilo" de las etiquetas html y body , por lo que puedo colocar una imagen de fondo específica para la página de inicio de sesión.
Pero simplemente agregar un estilo para el html, body en mi login.css no parece funcionar.
¿Hay alguna manera de anular el estilo en el html, body de un componente? O cualquier elemento para el caso.
He intentado cosas como:
:host(.btn) { ... } :host(.btn:host) { ... } .btn:host { ... } para aplicar estilo a un elemento desde fuera del componente de inicio de Login . Pero nada parece funcionar.
Debe cambiar la forma en que su componente sirve css usando ViewEncapsulation . De forma predeterminada, está configurado en Emulated y voluntad angular.
agregue un atributo que contenga una identificación sustituta y preprocese las reglas de estilo
Para cambiar este comportamiento, import ViewEncapsulation from 'angular2/core' y utilícelo en los metadatos del componente:
@Component({ ... encapsulation: ViewEncapsulation.None, ... })No estoy seguro de si esto es exactamente lo que está buscando, pero esto no lo dejará con una imagen de fondo del cuerpo cambiada permanentemente.
Así es como lo hice para algo similar. Si desea impactar la imagen de fondo del cuerpo solo para esta página, esto puede funcionar. (No lo he probado completamente, pero parece funcionar en los navegadores de Windows).
Dentro de su componente, puede trabajar directamente a través del DOM cuando se construye el componente. Cuando se destruye, puede deshacer el cambio.
export class SpecialBackground { constructor(){ document.body.style.backgroundImage = "url('path/to/your/image.jpg')"; document.body.style.backgroundPosition = "center center"; document.body.style.backgroundRepeat = "no-repeat"; document.body.style.backgroundAttachment = "fixed"; document.body.style.backgroundSize = "cover"; } ngOnDestroy(){ document.body.style.backgroundImage = "none"; } }Para sus propósitos, puede usar una función diferente (en lugar del constructor) cuando se hace clic en el botón y debería estar listo.
La forma en que lo usé es
constructor() { document.body.className = "bg-gradient"; } ngOnDestroy(){ document.body.className=""; }Esto agregará y eliminará dinámicamente el estilo del cuerpo de un componente en particular.