Saúl, miembro de este gran equipo, nos ha hecho el favor de escribir este artículo porque domina a la perfección dicho tema.
Solución:
Si está utilizando angular-cli.
Debe existir un archivo de estilo global.
- origen
- aplicación
- activos
- ambientes
- índice.html
- estilos.css
Ahí deberías poder poner tu estilo, por ejemplo. html background-color: black; para efectuar toda la página.
Puede hacer esto desde cualquiera de sus componentes. Por ejemplo:
export class AppComponent implements AfterViewInit
constructor(private elementRef: ElementRef)
ngAfterViewInit()
this.elementRef.nativeElement.ownerDocument.body.style.backgroundColor = 'yourColor';
Mediante el uso this.elementRef.nativeElement.ownerDocumentpuede acceder a la window.document objeto sin violar ninguna convención angular. Por supuesto, puede acceder directamente a la document objeto usando window.document pero, creo que sería mejor acceder a él a través de ElementRef .
En términos generales, el uso de ElementRef podría hacer que su aplicación sea más vulnerable a los ataques XSS. Consulte este documento oficial de Angular para obtener más información.
Además, establecer un estilo global en su archivo styles.css, como sugirió Andresson, podría no resolver su problema si está trabajando con múltiples componentes que tienen sus propios Shadow DOM.
Aquí hay una solución más segura para su problema, usando Ver encapsulación.
Establezca View Encapsulation en None (no olvide importar) en su aplicación.componente.ts:
import Component, ViewEncapsulation from '@angular/core';
@Component(
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None
)
A continuación, vaya a su aplicación.componente.css archivo y simplemente agregue su color de fondo:
body
background-color: green;
Este cambio afectará a su aplicación a nivel mundial. Lea más sobre esto aquí.
Nos puedes añadir valor a nuestro contenido dando tu experiencia en las referencias.