我正在制作一个LoginComponent英寸的Angular 2，它应该"重新设计"html和body标签，这样我就可以为登录页面添加特定的背景图像.
但是仅仅在我的login.css中添加html, body的样式似乎行不通.
有没有一种方法可以替代组件html, body上的样式？或任何与此相关的元素.
我试过这样的方法:
:host(.btn) { ... }
:host(.btn:host) { ... }
.btn:host { ... }
若要从Login组件外部设置元素样式，请执行以下操作.但似乎什么都不管用.
你可以试试
body {
/* body styles here */
}
但组件中的样式不应应用于自身之外的元素.
另一种方法是在主组件中使用body作为 Select 器，并使用主机绑定来设置/删除主体上的CSS类，从而使添加到索引中的CSS成为可能.html匹配.
@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(us)并向服务添加一些绑定时，类将被添加到主体中.
如果不想全局添加CSS，也可以直接绑定到样式属性
@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';
}
}
update
DomAdapter不见了.Renderer2应该提供类似的功能.
直接从登录组件创建<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');