首页 文章

在Angular2上向body添加类

提问于
浏览 次
14

我有三个组成部分 . 这些是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>
javascript angular

4 回答

  • 7

    您可以将根选择器更改为 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';
  }
}
    回复于
  • 5

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

    也可以看看

    回复于
  • 0

    1. If part of your application is in angular, then you can do this-

    let body = document.getElementsByTagName（'body'）[0];

    body.classList.remove（ “类名”）; //删除课程

    body.classList.add（ “类名”）; //添加课程

    2. I'll prefer answer given by @Yurzui if whole front end is in angular.

    回复于
  • 20

    很简单，你可以这样做来添加一个类到正文

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

相关问题