我正在开发 Angular 2 中的 LoginComponent，它应该“重新设计”html 和 body 标记，因此我可以放入特定于登录页面的背景图像。
但在我的login.css 中添加html, body 的样式似乎不起作用。
有没有办法从组件中覆盖html, body 的样式？或任何与此相关的元素。
我尝试过类似的方法：
:host(.btn) { ... }
:host(.btn:host) { ... }
.btn:host { ... }
为Login 组件外部的元素设置样式。但似乎没有任何效果。
【问题讨论】：
标签： angular shadow-dom
将您的样式放入一个 css 类/类中，并在您的组件中执行以下操作：
constructor() {
document.body.classList.add("mainMapPageBody");
}
ngOnDestroy(){
document.body.classList.remove("mainMapPageBody");
}
这使您不必在构造函数/析构函数中编写大量添加和删除样式，从而使调试更容易，就像在其他答案中一样。
【讨论】：
作为附加更新，当使用 Angular: 9.1.12 时，可以使用 src/styles.css 文件来为 body 标签添加样式。这个假设 src/angular.json 项目的架构师对象的样式数组已设置为 src/styles.css。
配置全局样式表时，angular.json 文件应如下所示：src/styles.css。 Angular 文档中还有更多详细信息：https://angular.io/guide/workspace-config#style-script-config
{
"projects": {
"app": {
"architect": {
"styles": ["src/styles.css"]
}
}
}
}
【讨论】：
很简单试试这个?
//Add Style
document.body.style.overflow = 'hidden'
// Remove style
document.body.style.removeProperty('overflow')
//Remove style on destroy
ngOnDestroy(): void {
document.body.style.removeProperty('overflow')
}
【讨论】：
我在我的组件中使用这种方法，在路由器插座中加载：
ngOnInit() {
// Change <body> styling
document.body.classList.add('align-content-between');
}
ngOnDestroy() {
// Change <body> styling
document.body.classList.remove('align-content-between');
}
【讨论】：
我的使用方式是
constructor() {
document.body.className = "bg-gradient";
}
ngOnDestroy(){
document.body.className="";
}
这将为特定组件的主体动态添加和删除样式。
【讨论】：
你可以试试
body {
/* body styles here */
}
但是组件中的样式不应该应用于它们自身之外的元素。
另一种方法是在主组件中使用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 时（对服务使用一些绑定，该类被添加到正文中。
如果不想全局添加 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';
}
}
更新
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');
【讨论】：
我对 margin-top 有同样的问题，我修复的方式是
constructor(
private _renderer: Renderer2,
) {
this._renderer.removeStyle(document.body, 'margin-top');
}
这对我来说非常有效。
【讨论】：
我不确定这是否正是您正在寻找的，但这不会给您留下永久更改的身体背景图像。
这是我为类似的事情所做的。如果您只想影响此页面的正文背景图像，这可能会起作用。 （我尚未对此进行全面测试，但它似乎适用于 Windows 浏览器。）
在组件内部，您可以在构建组件时直接通过 DOM 工作。当它被破坏时，您可以撤消更改。
export class SpecialBackground {
constructor(){
document.body.style.backgroundImage = "url('path/to/your/image.jpg')";
document.body.style.backgroundPosition = "center center";
document.body.style.backgroundRepeat = "no-repeat";
document.body.style.backgroundAttachment = "fixed";
document.body.style.backgroundSize = "cover";
}
ngOnDestroy(){
document.body.style.backgroundImage = "none";
}
}
出于您的目的，当您单击按钮时，您可以使用不同的函数（而不是构造函数），您应该一切顺利。
【讨论】：
我刚刚编辑了 styles.scss 文件，它对我有用。
【讨论】：
最好在根级别添加 css 文件并在 angular-cli.json 中配置它或在 index.html 中添加它。这样您就可以编写您的重置和全局样式，而无需担心 shadow dom 和其他概念。
【讨论】：
您需要使用ViewEncapsulation 更改组件服务css 的方式。默认情况下它设置为Emulated 和角度将
添加一个包含代理 id 的属性并预处理样式规则
要更改此行为 import ViewEncapsulation from 'angular2/core' 并在组件的元数据中使用它：
@Component({
...
encapsulation: ViewEncapsulation.None,
...
})
【讨论】：