Estilo html, cuerpo del componente web (Angular 2)
Estoy trabajando en un LoginComponent en Angular 2 que debería "restyle" las etiquetas html y body, para poder poner 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 forma de anular el estilo en el html, body desde un componente? O cualquier elemento para el caso.
He intentado cosas como:
:host(.btn) { ... }
:host(.btn:host) { ... }
.btn:host { ... }
Para dar estilo a un elemento fuera del componente Login. Pero nada parece funcionar.
8 answers
Usted podría intentar
body {
/* body styles here */
}
Pero se supone que los estilos de los componentes no deben aplicarse a elementos externos a ellos mismos.
Otra forma es usar body como selector en su componente principal y usar host-binding para establecer/eliminar una clase CSS en body para hacer CSS que haya agregado a su índice.coincidencia html.
@Component({
selector: "body",
host: {
"[class.some-class]":"someClass"
},
})
export class AppComponent {
constructor(private loginService: LoginService) {
loginService.isLoggedInChanged.subscribe((value) => {
this.someClass = value;
});
}
someClass: bool = false;
}
Cuando se establece someclass en true (usando algún enlace a un servicio, la clase se agrega al cuerpo.
Si no desea agregar CSS globalmente, también puede enlazar a un atributo de estilo directamente
@Component({
selector: "body",
host: {
"[style.background-image]":"bodyBackgroundImage()"
},
})
export class AppComponent {
bool isLoggedIn = false;
constructor(private loginService: LoginService) {
loginService.isLoggedInChanged.subscribe((value) => {
this.isLoggedIn = value;
});
}
function bodyBackgroundImage() {
return this.isLoggedIn ? 'url("gradient_bg.png")': 'none';
}
}
Update
DomAdapter se ha ido. Renderer2 debería proporcionar una funcionalidad similar.
Una forma de estilizar <body> directamente desde el componente login es usar el DomAdapter (ver también https://github.com/angular/angular/issues/4942 )
System.import('angular2/src/platform/browser/browser_adapter').then(function(browser_adapter) {
browser_adapter.BrowserDomAdapter.makeCurrent();
})
...
_dom: DomAdapter = new BrowserDomAdapter();
_dom.setStyle(_dom.query('body'), 'padding', '50px');
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-29 14:27:55
Necesita cambiar la forma en que su componente sirve css usando ViewEncapsulation. Por defecto se establece en Emulated y angular será
Agregue un atributo que contenga el id sustituto y preprocese las reglas de estilo
Para cambiar este comportamiento import ViewEncapsulation from 'angular2/core' y usarlo en los metadatos del componente:
@Component({
...
encapsulation: ViewEncapsulation.None,
...
})
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-20 04:34:55
No estoy seguro de si esto es exactamente lo que estás buscando, pero esto no te dejará con una imagen de fondo del cuerpo cambiada permanentemente.
Así es como lo hice para algo similar. Si quieres impactar la imagen de fondo del cuerpo solo para esta página, esto puede funcionar. (No he probado esto completamente, pero parece funcionar en los navegadores de Windows.)
Dentro de su componente puede trabajar directamente a través del DOM cuando el componente se construye. Cuando se destruye se puede deshacer 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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-29 04:13:44
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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-12-16 10:27:06
Acabo de editar los estilos.archivo scss y funcionó para mí.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-17 08:50:51
Tuve el mismo problema con margin-top, la forma en que arreglé es
constructor(
private _renderer: Renderer2,
) {
this._renderer.removeStyle(document.body, 'margin-top');
}
Esto funcionó perfectamente para mí.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-10 14:32:32
Es mejor agregar el archivo css a nivel raíz y configurarlo en angular-cli.json O añadirlo en el índice.HTML . así que puede escribir su reset y estilos globales y no hay necesidad de preocuparse por shadow dom y otros conceptos.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-04-28 13:50:14
Utilizo este enfoque en mi componente, cargado en router-outlet:
ngOnInit() {
// Change <body> styling
document.body.classList.add('align-content-between');
}
ngOnDestroy() {
// Change <body> styling
document.body.classList.remove('align-content-between');
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-09-12 11:05:08