Как изменить цвет фона всей страницы в Угловом

Ответ 1

Вы можете сделать это с любого из ваших компонентов. Например:

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

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

Используя this.elementRef.nativeElement.ownerDocument, вы можете получить доступ к объекту window.document без нарушения какого-либо углового соглашения. Конечно, вы можете напрямую обращаться к объекту document используя window.document но, я думаю, было бы лучше получить доступ к нему через ElementRef.

Ответ 2

Если вы используете angular-cli.
Должен существовать файл глобального стиля.

• ЦСИ
  • приложение
  • активы
  • окружающая среда
  • index.html
  • styles.css

Там вы можете указать свой стиль, например html { background-color: black; } html { background-color: black; } чтобы выполнить всю страницу.

Ответ 3

Вообще говоря, использование ElementRef может сделать ваше приложение более уязвимым для атак XSS. Для получения дополнительной информации обратитесь к этому официальному документу Angular.

Кроме того, установка глобального стиля в вашем файле styles.css, как предположил Andresson, может не решить вашу проблему, если вы работаете с несколькими компонентами, которые имеют свои собственные Shadow DOMs.

Здесь более безопасное решение вашей проблемы с использованием View Encapsulation.
Установите View Encapsulation на None (не забудьте импортировать) в своем app.component.ts:

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

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

Затем перейдите в файл app.component.css и просто добавьте цвет фона:

body {
  background-color: green;
}

Это изменение повлияет на ваше приложение во всем мире. Подробнее об этом читайте здесь.

Ответ 4

Следующее решение - еще одна альтернатива, с которой я столкнулся, когда столкнулся с той же проблемой. Чтобы приложение было более адаптируемым на разных платформах, мы можем использовать класс Renderer2, предоставляемый Angular, в качестве такой службы:

export class AppComponent {

constructor(private el: ElementRef, private renderer:Renderer2){}

  ngAfterViewInit(){

this.renderer.setStyle(this.el.nativeElement.ownerDocument.body,'backgroundColor', 'yourchoice color');

}

}

Более подробную информацию о Renderer2 и его методах можно найти здесь: Render2_Description