styles - style - ¿Cómo cambio la clase de cuerpo a través de una clase de escritura de tipos(angular2)
angular styleurls (6)
¿Cómo cambio la clase de cuerpo a través del componente raíz?
@Component({
selector: "app",
directives: [ROUTER_DIRECTIVES],
template: `
<section class="header">
<h1>App</h1>
<router-outlet></router-outlet> `
})
Aquí puede usar el JavaScript nativo en el componente Angular2 para cambiar la clase de la etiqueta <body> :
let body = document.getElementsByTagName(''body'')[0];
body.classList.remove("className"); //remove the class
body.classList.add("className"); //add the class
En caso de que alguien necesite agregar y eliminar una clase del cuerpo solo cuando un componente específico esté activo, se puede hacer de la siguiente manera. En mi caso específico, quería agregar la clase " landing page " solo cuando el usuario llega a la página de inicio (vista) y eliminar esa clase cuando el usuario navega a otras vistas:
import {Component, OnInit, OnDestroy} from ''@angular/core'';
export class HomeComponent implements OnInit {
constructor() {}
//Add the class to body tag when the View is initialized
ngOnInit() {
let body = document.getElementsByTagName(''body'')[0];
body.classList.add("landing-page");
}
//Remove the class from body tag when the View is destroyed
ngOnDestroy() {
let body = document.getElementsByTagName(''body'')[0];
body.classList.remove("landing-page");
}
}
Lo reproduzco mediante el uso del enrutamiento, como este -add al componente de la aplicación raíz este código:
this.activeRouter.events.subscribe(
data => {
this.className = data.url.split(''/'').join('' '').trim();
this.changeBodyClass();
})
y el cuerpo cambia:
changeBodyClass(){
if(this.el.nativeElement.parentElement.nodeName === ''BODY''){
this.el.nativeElement.parentElement.className = this.className ? this.className + ''-page'' : ''home-page'';
}
Necesitas inyectar en el constractor:
constructor(private activeRouter: Router,
private el: ElementRef)
Todavía en busca de una mejor solución, aquí está mi solución actual:
import { Component, OnInit, OnDestroy, ViewEncapsulation } from ''@angular/core'';
@Component({
selector: ''signup'',
templateUrl: ''./signup.component.html'',
styleUrls: [''./signup.component.css'',], // Where my custom CSS styles for body element declared
encapsulation: ViewEncapsulation.None, // That will not encapsulate my CSS styles (layout-full, page-signup) from signup.component.css inside component
})
export class SignupComponent implements OnInit, OnDestroy{
bodyClasses:string = "layout-full page-signup";
ngOnInit(): void {
$(''body'').addClass(this.bodyClasses);
}
ngOnDestroy() {
$(''body'').removeClass(this.bodyClasses);
}
}
Una forma que no depende de la manipulación directa de DOM es hacer que la etiqueta <body> del elemento de la aplicación utilice el body como selector y use el enlace del host para actualizar las clases de elementos de la aplicación.
@Component({
selector: ''body'',
host: {''[class.someClass]'':''someField''}
})
export class AppElement implements AfterViewInit {
someField: bool = false;
// alternatively to the host parameter in `@Component`
// @HostBinding(''class.someClass'') someField: bool = false;
ngAfterViewInit() {
someField = true; // set class `someClass` on `<body>`
}
}
Utilice el código de abajo.
ngOnInit() {
let body = document.getElementsByTagName(''body'')[0];
body.classList.add(''body-landing'');
}
ngOnDestroy() {
let body = document.getElementsByTagName(''body'')[0];
body.classList.remove("body-landing");
}