Question

如何通过根组件更改body类？

@Component({ 
   selector: "app", 
   directives: [ROUTER_DIRECTIVES], 
   template: ` 
       <section class="header"> 
           <h1>App</h1>  
           <router-outlet></router-outlet> ` 
})

Answer 1

在这里，您可以简单地使用Angular2组件中的本机JavaScript来更改<body>标记的类： -

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

Answer 2

不依赖于直接DOM操作的一种方法是，使用<body>作为选择器使body标记为app元素，并使用host-binding来更新app元素类

@Component({
   selector: 'body',
   host:     {'[class.someClass]':'someField'}
})
export class AppElement 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 3

仍在寻找更好的解决方案，这是我目前的解决方法：

import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';


@Component({
    selector: 'signup',
    templateUrl: './signup.component.html',
    styleUrls: ['./signup.component.css',], // Where my custom CSS styles for body element declared
    encapsulation: ViewEncapsulation.None, // That will not encapsulate my CSS styles (layout-full, page-signup) from signup.component.css inside component
})


export class SignupComponent implements OnInit, OnDestroy{

    bodyClasses:string = "layout-full page-signup";

    ngOnInit(): void {
        $('body').addClass(this.bodyClasses);
    }
    ngOnDestroy() { 
        $('body').removeClass(this.bodyClasses);
    }


}

Answer 4

如果有人需要仅在特定组件处于活动状态时从body添加和删除类，则可以按如下方式完成。在我的具体情况下，我只想在用户登陆主页（查看）时添加“登录页”类，并在用户导航到其他视图时删除该类：

import {Component, OnInit, OnDestroy} from '@angular/core';

export class HomeComponent implements OnInit {

    constructor() {}

    //Add the class to body tag when the View is initialized
    ngOnInit() {
        let body = document.getElementsByTagName('body')[0];
        body.classList.add("landing-page");
    }

    //Remove the class from body tag when the View is destroyed
    ngOnDestroy() {
        let body = document.getElementsByTagName('body')[0];
        body.classList.remove("landing-page");
    }
}

Answer 5

我通过使用路线来恢复它 - 就像这样 -add到root-app组件这段代码：

 this.activeRouter.events.subscribe(
      data => {
        this.className = data.url.split('/').join(' ').trim();
        this.changeBodyClass();
      })

和身体变化：

changeBodyClass(){
    if(this.el.nativeElement.parentElement.nodeName === 'BODY'){
       this.el.nativeElement.parentElement.className = this.className ? this.className + '-page' : 'home-page';
    }

你需要注入约束器：

constructor(private activeRouter: Router,
              private el: ElementRef)

Answer 6

使用以下代码。

 ngOnInit() {
    let body = document.getElementsByTagName('body')[0];
    body.classList.add('body-landing');
  }
  
  
  ngOnDestroy() {
    let body = document.getElementsByTagName('body')[0];
    body.classList.remove("body-landing");
  }

Answer 7

 ngOnInit() {
         let body = document.getElementsByTagName('body')[0];
         body.classList.add('nom_class');                                           
 }

用于向元素添加一个或多个类：

body.classList.add('make', 'me', 'look', 'rad');

如何通过typescript类更改body类（angular2）

7 个答案: