样式的HTML，身体Web组件（角2） [英] Style html,body from web component (Angular 2)
问题描述
我在角2个工作在 LoginComponent 应该restyle的 HTML 和体标签，这样我就可以把特定登录页面的背景图像。
但只是增加了风格 HTML，身体在我的 login.css 似乎不工作
有没有办法从一个组件覆盖上的 HTML，身体的风格？或与此有关的任何元素。
我试着喜欢的东西：
：主机（.btn）{...}
：主机（.btn：主机）{...}
.btn：主机{...}
从登录组件外风格的元素。但似乎没有任何工作。
您可以尝试
{体
/ *车身造型在这里* /
}
但在组件样式不应该被应用到自己以外的元素。
另一种方法是使用体如选择在你的主要成分，使用主机绑定设置/取消对身体CSS类让你添加到您的索引CSS html的比赛。
@Component（{
选择：身体，
主持人：{
[class.some级]：SomeClass的
}，
}）
出口类AppComponent {
构造函数（私人login服务：login服务）{
loginService.isLoggedInChanged.subscribe（（值）=＆GT; {
this.someClass =价值;
}）;
}
SomeClass的：布尔= FALSE;
}
当您设置 SomeClass的为真（usind一些绑定到一个服务类被添加到全身。
如果你不希望添加CSS全球范围内还可以绑定到样式属性直接
@Component（{
选择：身体，
主持人：{
[style.background形象]：bodyBackgroundImage（）
}，
}）
出口类AppComponent {
布尔isLoggedIn = FALSE;
构造函数（私人login服务：login服务）{
loginService.isLoggedInChanged.subscribe（（值）=＆GT; {
this.isLoggedIn =价值;
}）;
}
功能bodyBackgroundImage（）{
返回this.isLoggedIn？ URL（gradient_bg.png）'：'无';
}
}
一个办法风格＆LT;身体GT; 直接从登录组件使用 DomAdapter （另见 https://github.com/angular/angular/issues/4942 ）
browser_adapter.BrowserDomAdapter.makeCurrent（）;
}）
...
_dom：DomAdapter =新BrowserDomAdapter（）;
_dom.setStyle（_dom.query（身体），填充，50像素'）;
I'm working on a LoginComponent in Angular 2 that should "restyle" the html and body tags, so I can put in a background image specific for the login page.
But just adding a style for the html, body in my login.css doesn't seem to work.
Is there a way to override the style on the html, body from a component? Or any element for that matter.
I've tried things like:
:host(.btn) { ... }
:host(.btn:host) { ... }
.btn:host { ... }
to style an element from outside the Login component. But nothing seems to work.
You could try
body {
/* body styles here */
}
but styles in components are not supposed to be applied to elements outside themselves.
Another way is to use body as selector in your main component and use host-binding to set/remove a CSS class on body to make CSS you added to your index.html match.
@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;
}
when you set someclass to true (usind some binding to a service, the class gets added to the body.
If you don't want to add CSS globally you can also bind to a style attribute directly
@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';
}
}
A way to style <body> directly from the login component is to use the DomAdapter (see also 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');
这篇关于样式的HTML，身体Web组件（角2）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
