Как изменить класс тела с помощью класса typescript (angular2)

Как изменить класс body через корневой компонент?

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

Ответ 1

Один из способов, который не зависит от прямого манипулирования DOM, заключается в том, чтобы сделать тег <body> элементом app с помощью body в качестве селектора и использовать привязку хоста для обновления классов элементов приложения.

@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>`
  }
}

Ответ 2

Здесь вы можете просто использовать собственный JavaScript в компоненте Angular2, чтобы изменить класс тега <body>: -

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

Ответ 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);
    }


}

Ответ 4

i переустанавливаю его с помощью маршрутизации - например, -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)

Ответ 5

Используйте код ниже.

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

Ответ 6

В случае, если кто-то должен добавить и удалить класс из тела только при активном конкретном компоненте, это можно сделать, как показано ниже. В моем конкретном случае я хотел добавить класс целевой страницы только тогда, когда пользователь приземляется на Home Page (View) и удаляет этот класс, когда пользователь переходит к другим представлениям:

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