问题描述
我在应用程序中的登录页面和其他页面有不同的类，因此在用户登录后，我需要更改body元素的类.在这里，我试图做到这一点.
I have diffirent classes for login page and other pages in application so after user logged in I need to change class of body element. Here how I am trying to accomplish this..
index.html
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
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
app.component.ts
export class AppComponent {
@HostBinding('class.dashboard.site-navbar-small')
dashboardClass = false;
constructor(private auth:Auth){
this.dashboardClass=this.auth.authenticated();
}
}
我正在尝试将ngClass指令绑定到isAuthenticated字段..但我不受影响.我听说我们无法通过ts更改body元素，但是我该如何处理呢?
I am trying to bind ngClass directive to isAuthenticated field.. but I doesnt affected. I heard we are not able to change body element via ts, how can I handle it with anyway ?
推荐答案
不支持<app-root>以外的绑定.
您可以做的是在AppComponent和
@HostBinding('class.dashboard')
dashboardClass = false;
@HostBinding('class.site-navbar-small')
siteNavbarSmallClass = false;
...
，然后将属性设置为true以添加类.
and then set the properties to true to get the classes added.
或者只是
document.body.classList.add('dashboard');
这篇关于如何在angular2& typescript项目中更改身体的类别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！