Mám rozdielne triedy pre prihlasovaciu stránku a ďalšie stránky v aplikácii, takže po prihlásení používateľa musím zmeniť triedu prvkov tela. Tu sa snažím dosiahnuť toto ..
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();
}
}
Snažím sa zviazať smernicu ngClass na pole isAuthenticated .. ale nemám to vplyv. Počul som, že prostredníctvom ts nedokážeme zmeniť telesný prvok. Ako to s tým môžem zvládnuť?
odpovede:
3 pre odpoveď č. 1Viazanie vonku <app-root> nie sú podporované.
Čo môžete urobiť, je použiť selector: "body" v teba AppComponent a
@HostBinding("class.dashboard")
dashboardClass = false;
@HostBinding("class.site-navbar-small")
siteNavbarSmallClass = false;
...
a potom nastavte vlastnosti na true aby boli triedy pridané.
alebo len
document.body.classList.add("dashboard");
3 pre odpoveď č. 2
Jedným zo spôsobov je použitie <body> označte prvok aplikácie pomocou body ako selektor a pomocou väzby hostiteľa aktualizujte triedy prvkov aplikácie.
@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>`
}
}