Добавьте класс в тело Angular2

У меня есть три компонента. Это HomeComponent, SignInComponent и AppComponent. Моя домашняя страница (HomeComponent) отображается, когда приложение открывается. Я нажал кнопку "Вход" на странице входа. Я хочу, чтобы класс "signin-page" оставался в теле, открывая его.

Как я могу это сделать?

// 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>

Ответ 1

Вы можете изменить селектор корня на body, а затем использовать HostBinding decorator

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

Ответ 2

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

См. также

Ответ 3

Если часть вашего приложения находится на Angular, то вы можете сделать это:

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

Я предпочитаю ответ, данный @Yurzui, если весь интерфейс написан на Angular.

Ответ 4

Просто вы можете сделать это, чтобы добавить класс к телу

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