如何在angular 2 typescript项目中更改body类
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在angular 2 typescript项目中更改body类相关的知识，希望对你有一定的参考价值。
我在登录页面和应用程序中的其他页面有不同的类，所以在用户登录后我需要更改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改变身体元素，我怎么能用它来处理呢？
答案
不支持<app-root>以外的绑定。
你可以做的是在selector: 'body'和你使用AppComponent
@HostBinding('class.dashboard')
dashboardClass = false;
@HostBinding('class.site-navbar-small')
siteNavbarSmallClass = false;
...
然后将属性设置为true以添加类。
要不就
document.body.classList.add('dashboard');
另一答案
一种方法是使用<body>标记app元素，使用body作为选择器，并使用host-binding来更新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>`
另一答案
您还可以使用Renderer2修改body类。
renderer.addClass(document.body, "myClass");
要么
renderer.removeClass(document.body, "myClass");
以上是关于如何在angular 2 typescript项目中更改body类的主要内容，如果未能解决你的问题，请参考以下文章
如何部署我的 Angular 2 + Typescript + Webpack 应用程序
降级使用 Typescript 编写的 angular2 组件。如何将其导入用 es5 编写的 angular 1 项目？
如何将 jQuery 导入 Angular2 TypeScript 项目？
如何在同一个项目中将 Typescript 与 Angular CLI 和 Express/Node 一起使用？