如何使用 Angular 更改最外层 <body> 标签的背景颜色答案

【问题标题】：How to change the background color of the outermost <body> tag with Angular如何使用 Angular 更改最外层 <body> 标签的背景颜色
【发布时间】：2017-01-31 17:30:26
【问题描述】：

我想以编程方式更改 AngularApp 的背景颜色。这里的问题是，更改应用程序内的背景仅适用于屏幕的某些部分。可能只有已经充满内容的内容。我希望整个网站都改变颜色。

我正在使用 angular.io 提供的种子。 index.html 如下所示：

<!DOCTYPE html>
<html>
    <head>
        <base href="/">
        <title>Angular QuickStart</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="styles.css">
        <!-- Polyfill(s) for older browsers -->
        <script src="node_modules/core-js/client/shim.min.js"></script>
        <script src="node_modules/zone.js/dist/zone.js"></script>
        <script src="node_modules/systemjs/dist/system.src.js"></script>
        <script src="systemjs.config.js"></script>
        <script>
            System.import('app').catch(function (err) { console.error(err); });
        </script>
    </head>
  <body>
    <my-app>Loading AppComponent content here ...</my-app>
  </body>
</html>

有没有办法从 AngularApp 中操作最外层“body”的类？

我可以更改“我的应用” - 标签中的所有内容。有没有办法以第一个“body”标签在我的控制范围内的方式设置 index.html？

如果没有，还有其他方法可以控制外部“body”标签吗？

提前致谢！

BR马蒂亚斯

【问题讨论】：

标签： html angular typescript

【解决方案1】：

如果您使用'body'（而不是'my-app'）作为选择器，您应用于宿主元素的每个样式也会应用于<body>，因为它们是相同的。

@Component({
  selector: 'body'
  styles: [':host { border: solid 10px red;}']
})
export class AppComponent {
  @HostBinding('style.background-color')
  backgroundColor:string = '#ffaacc';

}

【讨论】：

【解决方案2】：

在您的组件中有一种更简单的方法

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {

    constructor() {
        document.body.style.background = 'rgba(0, 0, 0, .6)';
    }

}

或者在你的src/styles.css中使用简单的CSS

body {
    background: whatever;
}

【讨论】：