如何在 Angular 中更改整个页面的背景颜色

Posted 2023-03-06

【中文标题】如何在 Angular 中更改整个页面的背景颜色

【英文标题】：How to change whole page background-color in Angular

【发布时间】：2018-03-22 02:24:22

【问题描述】：

我正在尝试在 Angular 中更改整个页面的背景颜色（在没有框架的情况下使用正文或 html 标记）。而且我找不到最佳实践，如果可能的话，我希望它在框架内，因为我正在构建一个未来几年的应用程序。

【问题讨论】：

如果你使用 Angular CLI，你可以在 styles.css 中添加 html 和 body 标签。

把这个放到“app.component.css”html background-color: black; 中没有任何效果

不在 app.component.css 中，在 style.css 中。或者如果你将它设置在那里（组件），那么应该使用类似 ::ng-deep 的东西

【参考方案1】：

您可以从任何组件中执行此操作。例如：

export class AppComponent implements AfterViewInit 
    constructor(private elementRef: ElementRef) 
    ngAfterViewInit() 
        this.elementRef.nativeElement.ownerDocument
            .body.style.backgroundColor = 'yourColor';
    

通过使用this.elementRef.nativeElement.ownerDocument，您可以在不违反任何角度约定的情况下访问window.document 对象。当然，您可以使用window.document 直接访问document 对象，但我认为最好通过ElementRef 访问它。

【讨论】：

我试过了，还是不行，没有错误，就是没有效果，这里需要改什么this.elementRef.nativeElement.ownerDocument.style.backgroundColor吗？

我的错，实际上，您无法从 ngOnInit 生命周期挂钩访问 dom。我已经更正了我的答案

我实际上对你的回答更满意，而且它肯定是我代码中的答案，但由于安德森的回答恰到好处而且简单，我必须批准他的，我希望帮助我的知识会像获得声誉一样让您满意。

但是，@Anderson 的答案不是你想要的。您已要求最佳实践。我当然可以给你那个解决方案，但是我提到了一个解决方案，它也可能是最佳实践，因为这样你可以根据条件更改背景颜色。

如果你至少鼓励我为我的负担投票，那不是很好。

【参考方案2】：

如果您使用的是 angular-cli。 应该有一个全局样式文件。

源 应用程序 资产 环境 index.html

styles.css

在那里你应该能够把你的风格，例如html background-color: black; 影响整个页面。

【讨论】：

没注意到那个，谢谢，我等asmmahmud的回答，然后确认其中一个答案。

这应该是公认的答案。它更简单，并且似乎符合 angular 制造商的意图。

这将无法更改特定组件的背景颜色。

这对我不起作用，背景是黑色但我的组件有白色背景，我发现使用 body background-color: black; 对我有用。

引导程序覆盖styles.css

【参考方案3】：

一般来说，使用 ElementRef 可能会使您的应用更容易受到 XSS 攻击。更多信息请参考this official Angular doc。

此外，正如 Andresson 所建议的那样，在您的 styles.css 文件中设置全局样式可能无法解决您的问题，如果您正在使用具有自己的 Shadow DOMs 的多个组件。

这里有一个更安全的解决方案，使用 View Encapsulation。 在您的 app.component.ts 中将 View Encapsulation 设置为 None（不要忘记导入）：

import Component, ViewEncapsulation from '@angular/core';

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
)

接下来，转到您的 app.component.css 文件并简单地添加背景颜色：

body 
  background-color: green;

此更改将在全球范围内影响您的应用。 Read more about it here.

【讨论】：

顺便说一句，如果我对页面中的正文或 html 样式进行更改，我仍然会看到这些更改在其他页面中也有效。无论如何，是否仅限制该特定页面的更改?

为什么 ViewEncapsulation 需要设置为 None？我注意到如果我们不设置这个 ViewEncapsulation，颜色不会改变。 （抱歉，这里是 Angular 菜鸟）

【参考方案4】：

以下解决方案是我在面临同样问题时遇到的另一种选择。为了让应用程序在不同平台上更具适应性，我们可以使用 Angular 提供的 Renderer2 类作为这样的服务：

export class AppComponent 

constructor(private el: ElementRef, private renderer:Renderer2)

  ngAfterViewInit()

this.renderer.setStyle(this.el.nativeElement.ownerDocument.body,'backgroundColor', 'yourchoice color');

更多关于 Renderer2 及其方法的细节可以在这里找到：Render2_Description

【讨论】：

推荐使用渲染器而不是直接访问。在这里阅读更多：medium.com/better-programming/…

【参考方案5】：

不知道为什么没有提到它，但是将它添加到全局 css 文件中效果很好：

body  background-color: red !important; 

【讨论】：

你能解释一下 !important 的作用吗？因为这个解决方案对我有用

它只是强制css样式生效，即使其他css样式通常会阻止它。

引导程序覆盖styles.css