个人中心
gpt4 book ai didi

javascript - 在 Angular2 上向正文添加类

转载 作者：可可西里 更新时间：2023-11-01 01:27:58 26 4
gpt4 key购买 nike

我有三个组成部分。它们是 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>

最佳答案

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

关于javascript - 在 Angular2 上向正文添加类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39971762/

26 4 0
文章推荐： java - 如何制作JPanel的背景渐变
文章推荐： ios - 如何设置圆形图片的背景颜色？
文章推荐： java - JVM内存中存放的是Java.class文件
文章推荐： javascript - "can' t 创建隐藏全局属性的重复变量”
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com