使用ngClass设置body元素的class属性的值 [英] set value of class attribute of body element with ngClass
问题描述
如果用户未登录，我需要更改类的值，我在app.component.ts和login.component.ts中检查了这些值；
I need to change class value if user signed in or not, I checked this in app.component.ts and login.component.ts here they are;
app.component.ts
app.component.ts
export class AppComponent {
isAuthenticated:boolean;
constructor(private auth:Auth){
this.isAuthenticated=this.auth.authenticated();
}
}
login.component.ts
login.component.ts
export class LoginComponent {
isAuthenticated:boolean;
constructor(private auth:Auth){
this.isAuthenticated=this.auth.authenticated();
}
}
和index.html
and index.html
<body [ngClass]="{
'dashboard site-navbar-small' :isAuthenticated,
'login-form login-form-second page-login-second' :!isAuthenticated
}">
<app-root>Loading...</app-root>
但是它不起作用 这是我在浏览器中的外观；
but it doesnt work here i how it looks in browser;
推荐答案
The root component of an angular app is inside the body tag : Angular 2 documentation so we can not bind the body tag directly
目前，角度仅提供标题服务来获取/设置页面标题
And for now angular has give only Title service to get/set the title of the page
export class AppComponent {
title = 'app works!';
public constructor(private titleService:Title){
this.titleService.setTitle('My ToDo');
}
对于正文标签，您可以使用setElementClass plunker 或可以使用Jquery
For body tag you can use setElementClass plunker or you can use Jquery
setElementClass(document.body, "dashboard site-navbar-small", isAuthenticated)
setElementClass(document.body, "login-form login-form-second page-login-second", !isAuthenticated)
这篇关于使用ngClass设置body元素的class属性的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
