content - Estilo html, cuerpo del componente web(angular 2)
page title angular 4 (8)
Estoy trabajando en un LoginComponent en Angular 2 que debería "cambiar el estilo" de las etiquetas html y body , de modo que pueda poner una imagen de fondo específica para la página de inicio de sesión.
Pero simplemente agregando 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 ese asunto.
He intentado cosas como:
:host(.btn) { ... }
:host(.btn:host) { ... }
.btn:host { ... }
para diseñar un elemento desde fuera del componente Login . Pero nada parece funcionar.
Acabo de editar el archivo styles.scss y funcionó para mí.
Es mejor agregar el archivo CSS a nivel raíz y configurarlo en angular-cli.json O agregarlo en index.html. para que pueda escribir su reinicio y estilos globales y no tenga que preocuparse por shadow dom y otros conceptos.
La forma en que lo uso es
constructor() {
document.body.className = "bg-gradient";
}
ngOnDestroy(){
document.body.className="";
}
Esto agregará y eliminará dinámicamente el estilo del cuerpo para un componente en particular.
No estoy seguro de si esto es exactamente lo que estás buscando, pero esto no te dejará con una imagen de fondo corporal permanentemente cambiada.
Así es como lo hice por 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 tu componente puedes simplemente 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 su propósito, puede usar una función diferente (en lugar del constructor) cuando se hace clic en el botón y debe hacerlo.
Tu podrías intentar
body {
/* body styles here */
}
pero los estilos en los componentes no deben aplicarse a elementos externos.
Otra forma es usar body como selector en su componente principal y usar el enlace de host para establecer / eliminar una clase de CSS en el cuerpo para hacer CSS que haya agregado a su coincidencia de index.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 establece someclass en true (usa algunos enlaces a un servicio, la clase se agrega al cuerpo).
Si no desea agregar CSS globalmente, también puede vincularse 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'';
}
}
actualizar
DomAdapter se ha ido. Renderer2 debería proporcionar una funcionalidad similar.
Una forma de estilo <body> directamente desde el componente de inicio de sesión es usar 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'');
Tuve el mismo problema con margin-top, la forma en que lo arreglé
constructor(
private _renderer: Renderer2,
) {
this._renderer.removeStyle(document.body, ''margin-top'');
}
Esto funcionó perfectamente para mí.
Uso este enfoque en mi componente, cargado en el enrutador de salida:
ngOnInit() { // Change <body> styling document.body.classList.add(''align-content-between''); } ngOnDestroy() { // Change <body> styling document.body.classList.remove(''align-content-between''); }
ViewEncapsulation cambiar la forma en que su componente sirve css usando ViewEncapsulation . Por defecto está configurado en Emulated y angular will
agregue un atributo que contenga una identificación sustituta y preprocesa las reglas de estilo
Para cambiar este comportamiento, import ViewEncapsulation from ''angular2/core'' y import ViewEncapsulation from ''angular2/core'' en los metadatos del componente:
@Component({
...
encapsulation: ViewEncapsulation.None,
...
})