web-dev-qa-db-ja.com

Angularでページ全体の背景色を変更する方法

私はAngularのページ全体の背景色を変更しようとしています（フレームワークなしで作業する場合はbodyまたはhtmlタグを使用します）。そして、このためのベストプラクティスを見つけることができません。今後数年間アプリケーションを構築しているので、可能であればフレームワーク内に収めたいと思います。

cssangularbackground-color
18
Efim Rozovsky

これは、任意のコンポーネントから実行できます。例えば：

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

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

this.elementRef.nativeElement.ownerDocumentを使用すると、angular規則に違反することなくwindow.documentオブジェクトにアクセスできます。もちろん、window.documentを使用してdocumentオブジェクトに直接アクセスできますが、ElementRefを介してアクセスした方が良いと思います。

22
asmmahmud

Angular-cliを使用している場合。
グローバルスタイルファイルが存在する必要があります。

  • src
    • アプリ
    • 資産
    • 環境
    • index.html
    • styles.css

そこにあなたのスタイルを置くことができるはずです。 html { background-color: black; }はページ全体に影響します。

29
Andresson

一般的に、ElementRefを使用すると、アプリがXSS攻撃に対してより脆弱になる可能性があります。詳細については、 this official Angular doc を参照してください。

また、Andressonが示唆したように、styles.cssファイルにグローバルスタイルを設定しても、独自の Shadow DOMs を持つ複数のコンポーネントを使用している場合、問題が解決しない場合があります。

View Encapsulationを使用して、問題に対するより安全なソリューションを示します。
app.component.tsでView EncapsulationをNoneに設定します（インポートすることを忘れないでください）。

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

この変更はアプリにグローバルに影響します。 詳細はこちら 。

14
vovdev

次の解決策は、同じ問題に直面しているときに出くわした別の選択肢です。さまざまなプラットフォームでアプリケーションをより適応させるには、Angularが提供する 'Renderer2'クラスを次のようなサービスとして使用できます。

エクスポートクラスAppComponent {

constructor（プライベートel：ElementRef、プライベートレンダラー：Renderer2）{}

ngAfterViewInit（）{

this.renderer.setStyle（this.el.nativeElement.ownerDocument.body、 'backgroundColor'、 'yourchoice color'）;

}

}

Renderer2とそのメソッドに関する詳細は、ここにあります： https://angular.io/api/core/Renderer2#description

0
Sree