Componentからbodyタグに適用するスタイルを動的に変えたい

#1

通常bodyタグに対するスタイルはstyles.cssに記載するもの思っております。
しかし、ただいま作成しているアプリは、画面によってbodyタグに適用するスタイルが異なっており、component側から適用するcssファイルを動的に変える必要がある状況です。
調べてもなかなかいい解決策が出てこず、ノウハウをお持ちの方がいらっしゃればご教示いただけると幸甚です。

Angularのバージョンは8です。

#2

bodyタグに適用したいスタイルにもよるかと思いますが、styles.cssを動的に変えるというより、

  • body全体を覆うページを表すcomponentを必要なだけ用意し別々のスタイルを設定しておき、それをroutingで切り替える
  • componentからはbodyのclassを付け替えるだけにしておき、styles.css内でclassによって適用するスタイルが変わるように記載しておく

あたりが妥当かなと思いました。後者は例えば以下のようなCSSを想定しています。

body.hoge {
  background: red;
}

body.fuga {
  background: blue;
}
#3

tsukkeeさん
ご回答ありがとうございます。
後者の方法ですが、componentからclassを付け替える方法とは以下のようなものを想定されていますでしょうか？

component
ngOnInit(): void {
document.body.className = “hoge”;
：
}

ngOnDestroy(): void {
    document.body.removeAttribute("class");
    ：
}
#4

そうですね。なお、実際にはRenderer経由にするなどあると思います。

#6

ありがとうございます。
ご教示頂いた方法を基に、以下のように実装してみたのですが、うまくスタイルが反映されませんでした…
原因にお心当たりがあればご教示いただけますでしょうか。

component
import { Component, OnInit, OnDestroy, Renderer2 } from “@angular/core”;
：
styleUrls: [./sample.css]
：
constructor(private renderer: Renderer2) {}
：
ngOnInit(): void {
this.renderer.addClass(document.body, “hoge”);
：
}
：
ngOnDestroy(): void {
this.renderer.removeClass(document.body, “hoge”);
：
}

sample.css
.hoge {
font-family: “ＭＳ Ｐゴシック”, “Helvetica”, “HiraginoSans-W4”, “ヒラギノ角ゴシック W4”, “sans-serif”;
font-size: 9pt;
color: #000000;
}

印刷用cssを特定の画面に付与したい
#7

結果として、ngOnInitにはなにも記載せず、ViewEncapsulation.Noneを指定してcssのカプセル化を解除することでうまくいきました！
＜参考URL＞

#8

ひとまず解決したようで良かったです。

全体構成が見えていないので外しているかもですが、bodyに設定したclassによって各コンポーネント内のスタイルを変えたいというような感じにも見えたので、その場合:host-context https://angular.jp/guide/component-styles#host-context でもうまく書けるかも知れません。