在Angular2上将类添加到正文答案

【问题标题】：Add class to body on Angular2在Angular2上将类添加到正文
【发布时间】：2017-02-19 16:06:34
【问题描述】：

我有三个组件。它们是 HomeComponent、SignInComponent 和 AppComponent。我的主页 (HomeComponent) 在应用程序打开时显示。我在登录页面打开时单击了“登录”按钮。我希望“登录页面”类在打开时显示为正文。

我该怎么做？

// AppComponent
import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'app',
  template: '<router-outlet></router-outlet>'
})
export class AppComponent {}

// SignInComponent
import { Component } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'signin',
    templateUrl: './signin.component.html',
    styleUrls: ['./signin.component.css']
})
export class SignInComponent {}

// HomeComponent
import { Component } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'home',
    templateUrl: './home.component.html'
})
export class HomeComponent { }

// Part of index.html
<body>
<app>
    <div class="spinner">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
    </div>
</app>
</body>

【问题讨论】：

我想如果你给每个组件容器都提供动态类会容易得多。然后你可以很容易地添加它......

标签： javascript angular

【解决方案1】：

您可以将根选择器更改为body，然后使用HostBinding 装饰器

@Component({
  selector: 'body',
  template: `<child></child>`
})
export class AppComponent {
  @HostBinding('class') public cssClass = 'class1';
}

@Component({
  selector: 'child',
  template: `<button (click)="setClass()">Set class</button>`
})
export class ChildComponent {
  constructor(private rootComp: AppComponent) {  }
  setClass() {
    this.rootComp.cssClass = 'class2';
  }
}

【讨论】：

这太狡猾了！ ?
你拯救了我的一天。太感谢了！ :)
在我看来，如果您这样做了，您还想从 index.html 中删除 body 标记...不是吗？
...这会引入 tslint 错误，因为选择没有前缀。不一定是问题，但我尽量避免我的代码出现 linting 错误。
@BBaysingerb 为什么要删除？ Angular 将替换正文的内容。要修复 tslint 错误，您可以使用 // tslint:disable-next-line

【解决方案2】：

如果您的应用程序的一部分在 Angular 中，那么您可以这样做：

let body = document.getElementsByTagName('body')[0];
body.classList.remove("className");   //remove the class
body.classList.add("className");   //add the class

如果整个前端都在 Angular 中，我会更喜欢 @Yurzui 给出的答案。

【讨论】：

这对我来说是最干净、最快捷的解决方案。谢谢。

【解决方案3】：

Angular2 不提供任何内置方式来修改根组件之外的 DOM 元素（<title> 除外）。

querySelector('body').classList.add('signin-page');
querySelector('body').classList.remove('signin-page');

或

@Component(
  selector: 'body',
  templateUrl: 'app_element.html'
)
class AppElement {
  @HostBinding('class.fixed') 
  bool isFixed = true;
}

另见

【讨论】：

这会破坏服务器端渲染。
@Günter Zöchbauer 我在这里使用@hostbinding，但无论布尔值如何，我的 CSS 都会在瞬间触发。
@BenRacicot “瞬间触发”是什么意思。无法想象它除了添加类之外什么都做。
@GünterZöchbauer 只要我的 bool 为真，我就会向 body 添加一个活动类。然而，.active 的 css 会在应用程序加载并随后立即消失时触发。当我删除 @HostBinding('class') private page = 'active'; 时，不会触发 css。只是难住了。
绑定到class 可能很脆弱，这与绑定到class.active 不同。也许你可以在 Plunker 中重现？

【解决方案4】：

你可以很简单地为body添加一个类

document.body.classList.add('signin-page');

【讨论】：