Question

我在应用程序中有登录页面和其他页面的不同类，所以在用户登录后我需要更改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改变身体元素，我怎么能用它来处理呢？

Answer 1

一种方法是使用<body>作为选择器将body标记为app元素，并使用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>`
  }
}

Answer 2

不支持<app-root>之外的绑定。

您可以在selector: 'body'和

中使用AppComponent

@HostBinding('class.dashboard')
dashboardClass = false;

@HostBinding('class.site-navbar-small')
siteNavbarSmallClass = false;

...

然后将属性设置为true以添加类。

或只是

document.body.classList.add('dashboard');

Answer 3

您还可以使用Renderer2修改正文类。

renderer.addClass(document.body, "myClass");

或

renderer.removeClass(document.body, "myClass");

如何在angular2＆amp; typescript项目中更改正文类

3 个答案: