將類添加到Angular2上

Question

我有三個組成部分。 它們是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>

Answer 1

您可以將根選擇器更改為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';
  }
}

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

也可以看看

Answer 3

如果應用程序的一部分位於Angular中，則可以執行以下操作：

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

如果整個前端都在Angular中，我希望使用@Yurzui給出的答案。

Answer 4

很簡單，您可以這樣做將一個類添加到正文中

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

將類添加到Angular2上

問題描述

4 個解決方案

解決方案1
21 已采納 2016-10-11 07:00:15

解決方案2
8 2016-10-11 06:51:42

解決方案3
7 2017-05-17 04:56:09

解決方案4
1 2018-12-27 10:53:06

將類添加到Angular2上

問題描述

4 個解決方案

解決方案1 21 已采納 2016-10-11 07:00:15

解決方案2 8 2016-10-11 06:51:42

解決方案3 7 2017-05-17 04:56:09

解決方案4 1 2018-12-27 10:53:06

解決方案1
21 已采納 2016-10-11 07:00:15

解決方案2
8 2016-10-11 06:51:42

解決方案3
7 2017-05-17 04:56:09

解決方案4
1 2018-12-27 10:53:06