在Angular2上向body添加类

时间:2016-10-11 06:48:12

标签: javascript angular

我有三个组成部分。这些是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>

4 个答案:

答案 0 :(得分:20)

您可以将根选择器更改为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';
  }
}

答案 1 :(得分:7)

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;
}

另见

答案 2 :(得分:5)

<强> 1。如果您的应用程序的一部分是有角度的,那么您可以这样做 -

让body = document.getElementsByTagName(&#39; body&#39;)[0];

body.classList.remove(&#34;的className&#34); //删除课程

body.classList.add(&#34;的className&#34); //添加类

<强> 2。如果整个前端处于棱角分明状态,我会更喜欢@Yurzui给出的答案。

答案 3 :(得分:0)

简单的方法是将一个类添加到正文中

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