发表新帖
发表新帖

How do I change the body class via a typescript class (angular2)

前端 未结
关注
7 1841
失恋的感觉
失恋的感觉 2020-12-14 02:04

How do I change the body class via the root component? 

@Component({ 
   selector: \"app\", 
   directives: [ROUTER_
相关标签:
7条回答
  • 太阳男子
    2020-12-14 02:44

    Use below code. 

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

    0 讨论(0)
  • 逝去的感伤
    2020-12-14 02:48

    i resove it by use the routeing - like this -add to the root-app component this code : 

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

    and the body change:

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

    you need to inject in the constractor:

    constructor(private activeRouter: Router,
              private el: ElementRef)
    0 讨论(0)
  • 太阳男子
    2020-12-14 02:55 
     ngOnInit() {
         let body = document.getElementsByTagName('body')[0];
         body.classList.add('nom_class');                                           
 }

    For add one or more classes to the element:

    body.classList.add('make', 'me', 'look', 'rad');
    0 讨论(0)
  • 离开以前
    2020-12-14 02:56

    In case someone needs to add and remove class from body only when a specific component is active, it can be done as below. In my specific case, I wanted to add the "landing-page" class only when user lands on Home Page (View) and remove that class when user navigates to other views:

    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");
    }
}
    0 讨论(0)
  • 心在旅途
    2020-12-14 03:08

    One way that doesn't depend on direct DOM manipulation is, to make the <body> tag the app element by using body as selector and use host-binding to update the app elements classes.

    @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>`
  }
}
    0 讨论(0)
  • 无人及你
    2020-12-14 03:08

    Still looking for a better solution, here is my current workaround:

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


}
    0 讨论(0)
 看不清?
提交回复
热议问题