TyF*_*ude 3 typescript angular
我的登录页面和应用程序中的其他页面具有不同的类，因此在用户登录后，我需要更改body元素的类。在这里，我试图做到这一点。
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();
}
}
我正在尝试将ngClass指令绑定到isAuthenticated字段..但我不受影响。我听说我们无法通过ts更改body元素，但是我该如何处理呢？
一种方法是<body>使用bodyas 选择器使标签成为 app 元素，并使用主机绑定来更新 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>`
}
}
<app-root>不支持外部绑定。
你可以做的就是用selector: 'body'你AppComponent和
@HostBinding('class.dashboard')
dashboardClass = false;
@HostBinding('class.site-navbar-small')
siteNavbarSmallClass = false;
...
然后将属性设置为true以添加类。
要不就
document.body.classList.add('dashboard');
| 归档时间： |
|
| 查看次数： |
3228 次 |
| 最近记录： |