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