Question

如果用户是否登录，我需要更改类值，我在app.component.ts和login.component.ts中检查了这一点;

app.component.ts

export class AppComponent {
  isAuthenticated:boolean;
  constructor(private auth:Auth){
      this.isAuthenticated=this.auth.authenticated();
  }
}

login.component.ts

 export class LoginComponent {
  isAuthenticated:boolean;   
  constructor(private auth:Auth){
    this.isAuthenticated=this.auth.authenticated();
  }
}

和index.html

<body [ngClass]="{
  'dashboard site-navbar-small' :isAuthenticated,
  'login-form login-form-second page-login-second' :!isAuthenticated
}">
  <app-root>Loading...</app-root>

但它不起作用在这里我看它在浏览器中的样子;

Answer 1

角度应用的根组件位于body标签内：Angular 2 documentation所以我们无法直接绑定body标签

现在，angular只提供了Title服务来获取/设置页面标题

  export class AppComponent {
  title = 'app works!';
  public constructor(private titleService:Title){
    this.titleService.setTitle('My ToDo');
  }

对于body标记，您可以使用setElementClass plunker，也可以使用Jquery

setElementClass(document.body, "dashboard site-navbar-small", isAuthenticated)
setElementClass(document.body, "login-form login-form-second page-login-second", !isAuthenticated)

Answer 2

您是否尝试将构造函数中的逻辑移动到简单函数中？它应该如何工作？您能否提供有关代码中逻辑的更多信息？

<强> app.component.ts

export class AppComponent {
  isAuthenticated:boolean = false;

  private toggle(){
     this.isAuthenticated = !this.isAuthenticated;
  }
}

<强> login.component.ts

 export class LoginComponent {
  isAuthenticated:boolean = false; 

   private toggle2(){
     this.isAuthenticated = !this.isAuthenticated;
  }
}

<强> index.html

<body [ngClass]="{ 
  'dashboard site-navbar-small': isAuthenticated,
  'login-form login-form-second page-login-second': !isAuthenticated
}">
</body>

修改

您正在尝试将函数绑定到布尔变量。你确定它看起来像这样吗？ this.isAuthenticated = this.auth.authenticated();

使用ngClass设置body元素的class属性的值

2 个答案: