Ho diverse classi per la pagina di accesso e altre pagine nell'applicazione, quindi dopo aver effettuato l'accesso ho bisogno di cambiare la classe dell'elemento body. Ecco come sto cercando di realizzare questo ..
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();
}
}
Sto cercando di associare la direttiva ngClass a isAuthenticated campo .. ma non ne risente. Ho sentito che non siamo in grado di cambiare l'elemento del corpo tramite ts, come posso gestirlo comunque?
risposte:
3 per risposta № 1Attacchi all'esterno <app-root> non sono supportati
Quello che puoi fare è usare selector: "body" in te AppComponent e
@HostBinding("class.dashboard")
dashboardClass = false;
@HostBinding("class.site-navbar-small")
siteNavbarSmallClass = false;
...
e quindi impostare le proprietà su true per aggiungere le classi.
o semplicemente
document.body.classList.add("dashboard");
3 per risposta № 2
Un modo è usare make the <body> tag l'elemento dell'app usando body come selettore e utilizzare l'associazione host per aggiornare le classi di elementi dell'app.
@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>`
}
}