我正在使用角色2中的一个LoginComponent，它应该“清理”html和body标签，所以我可以放入特定于登录页面的背景图片。
但是只要添加一个html的样式，我的login.css中的body就好像不起作用了。
有没有办法从组件覆盖html，body的风格？或任何元素的事情。
我试过的东西就像：
:host(.btn) { ... }
:host(.btn:host) { ... }
.btn:host { ... }
从Login组件外部创建一个元素。但似乎没有任何工作。
解决方法
你可以试试
body {
/* body styles here */
}
但组件中的样式不应该应用于外部元素。
另一种方法是在主要组件中使用body作为选择器，并使用host-binding来设置/删除body上的CSS类，使您添加到index.html匹配中的CSS。
@Component({
selector: "body",host: {
"[class.some-class]":"someClass"
},})
export class AppComponent {
constructor(private loginService: LoginService) {
loginService.isLoggedInChanged.subscribe((value) => {
this.someClass = value;
});
}
someClass: bool = false;
}
当你将someclass设置为true(使用一些绑定到一个服务，该类被添加到该主体。
@Component({
selector: "body",host: {
"[style.background-image]":"bodyBackgroundImage()"
},})
export class AppComponent {
bool isLoggedIn = false;
constructor(private loginService: LoginService) {
loginService.isLoggedInChanged.subscribe((value) => {
this.isLoggedIn = value;
});
}
function bodyBackgroundImage() {
return this.isLoggedIn ? 'url("gradient_bg.png")': 'none';
}
}
一种风格的方式< body>直接从登录组件是使用DomAdapter(另见https://github.com/angular/angular/issues/4942)
System.import('angular2/src/platform/browser/browser_adapter').then(function(browser_adapter) {
browser_adapter.BrowserDomAdapter.makeCurrent();
})
...
_dom: DomAdapter = new BrowserDomAdapter();
_dom.setStyle(_dom.query('body'),'padding','50px');
