Tengo diferentes clases para la página de inicio de sesión y otras páginas en la aplicación, por lo que, después de que el usuario haya iniciado sesión, debo cambiar la clase de elemento del cuerpo. Aquí estoy tratando de lograr esto ..
index.html
<body [ngClass]="{
"dashboard site-navbar-small" :isAuthenticated,
"login-form login-form-second page-login-second" :!isAuthenticated
}">
<app-root>Loading...</app-root>
login.component.ts
export class LoginComponent {
@HostBinding("class.login-form.login-form-second.page-login-second")
siteNavbarSmallClass = false;
constructor(private auth:Auth){
this.siteNavbarSmallClass=this.auth.authenticated();
}
}
app.component.ts
export class AppComponent {
@HostBinding("class.dashboard.site-navbar-small")
dashboardClass = false;
constructor(private auth:Auth){
this.dashboardClass=this.auth.authenticated();
}
}
Estoy tratando de enlazar la directiva ngClass al campo autenticado ... pero no me afecta. Escuché que no podemos cambiar el elemento del cuerpo a través de ts, ¿cómo puedo manejarlo de todos modos?
Respuestas
3 para la respuesta № 1Encuadernaciones fuera <app-root> no son compatibles
Lo que puedes hacer es usar selector: "body" en ti AppComponent y
@HostBinding("class.dashboard")
dashboardClass = false;
@HostBinding("class.site-navbar-small")
siteNavbarSmallClass = false;
...
y luego establecer las propiedades en true para obtener las clases añadidas.
o solo
document.body.classList.add("dashboard");
3 para la respuesta № 2
Una forma es usar make the <body> etiqueta el elemento de la aplicación usando body como selector y usar enlace de host para actualizar las clases de elementos de la aplicación.
@Component({
selector: "body",
host: {"[class.someClass]":"someField"}
})
export class AppComponent 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>`
}
}