Búsqueda de sitios web

html - Cómo cambiar el color de fondo de la etiqueta <body> más externa con Angular

Quiero cambiar el color de fondo de mi AngularApp de forma programática. El problema aquí es que, al cambiar el fondo dentro de la aplicación, se aplica solo a una parte de la pantalla. Probablemente solo a lo que ya tiene contenido. Quiero que todo el sitio cambie de color.

Estoy trabajando con la semilla que proporciona angular.io. El index.html se ve así:

<!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>

¿Hay alguna manera de manipular la clase del "body" más externo desde la AngularApp?

Puedo cambiar todo lo que está dentro de la etiqueta "my-app". ¿Hay alguna manera de configurar el index.html de modo que la primera etiqueta "body" esté bajo mi control?

Si no, ¿hay otra manera de controlar la etiqueta externa "body"?

¡Gracias de antemano!

BR Mathias

Respuesta #1

Si usas 'body' (en lugar de 'my-app') como selector, todos los estilos que apliques al elemento host también se aplican a <body> porque son el mismo.

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

}

Respuesta #2

Hay una manera más fácil en tu componente

@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)';
    }

}

O con CSS simple en tu src/styles.css

body {
    background: whatever;
}

Artículos relacionados