Question

我想以编程方式更改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”的类？

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

如果没有，是否有另一种方法来控制外部“身体”标签？

提前致谢！

BR Mathias

Answer 1

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

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

}

Answer 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;
}

如何使用Angular

2 个答案: