web-dev-qa-db-fra.com

Comment changer la couleur de fond de la page entière en Angular

J'essaye de changer la couleur de fond pour la page entière dans Angular (utiliserait le corps ou la balise html si je travaillais sans framework). et je ne trouve pas la meilleure pratique pour cela, je veux que cela soit dans la mesure du possible, car je construis une application pour les années à venir.

cssangularbackground-color
18
Efim Rozovsky

Vous pouvez le faire à partir de n'importe lequel de vos composants. Par exemple:

    export class AppComponent implements AfterViewInit {
       constructor(private elementRef: ElementRef){

       }
       ngAfterViewInit(){
         this.elementRef.nativeElement.ownerDocument.body.style.backgroundColor = 'yourColor';
      }
   }

En utilisant this.elementRef.nativeElement.ownerDocument, vous pouvez accéder au window.document objet sans violer aucune convention angular. Bien entendu, vous pouvez accéder directement à l’objet document à l’aide de window.document mais, je pense qu’il serait préférable d’y accéder par le biais de ElementRef.

22
asmmahmud

Si vous utilisez angular-cli.
Il devrait exister un fichier de style global.

  • src
    • app
    • les atouts
    • environnements
    • index.html
    • styles.css

Vous devriez pouvoir y mettre votre style, par exemple. html { background-color: black; } pour effectuer toute la page.

29
Andresson

De manière générale, l'utilisation d'ElementRef pourrait rendre votre application plus vulnérable aux attaques XSS. Reportez-vous à this official Angular doc pour plus d'informations.

En outre, la définition d’un style global dans votre fichier styles.css, comme l’a suggéré Andresson, pourrait ne pas résoudre votre problème si vous travaillez avec plusieurs composants ayant leurs propres Shadow DOM .

Voici une solution plus sûre à votre problème, en utilisant View Encapsulation.
Définissez l'encapsulation de la vue sur Aucune (n'oubliez pas d'importer) dans votre app.component.ts :

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

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

Ensuite, allez dans votre fichier app.component.css et ajoutez simplement votre couleur de fond:

body {
  background-color: green;
}

Ce changement affectera votre application globalement. En savoir plus ici .

14
vovdev

La solution suivante est une autre alternative que j'ai trouvée alors que je faisais face au même problème. Pour que l'application soit plus adaptable sur différentes plates-formes, nous pouvons utiliser la classe 'Renderer2' fournie par Angular) en tant que service comme celui-ci:

classe d'exportation AppComponent {

constructeur (el privé: ElementRef, moteur de rendu privé: Renderer2) {}

ngAfterViewInit () {

this.renderer.setStyle (this.el.nativeElement.ownerDocument.body, 'backgroundColor', 'votre couleur de choix');

}

}

Plus de détails concernant Renderer2 et ses méthodes peuvent être trouvés ici: https://angular.io/api/core/Renderer2#description

0
Sree