Angularでページごとに色が変わるヘッダーを作りたい

Question

前提・実現したいこと

AngularでWEBサイトを製作しており、スクロールすると色が変わるヘッダーメニューを作りました。
ページトップでは透明で、スクロールするとfixedクラスが付与されて黒になるというものです。
しかし、トップ(home)ページ以外のページ(今回のcontactページ)ではスクロール関係無しに常に黒いヘッダーにしたいです。

発生している問題

「ページ遷移後、URLがcontactであれば、not-homeクラスを付けて背景色を黒にする」というイメージで書きました。
確かにこれで遷移直後はnot-homeクラスが付いているのですが、スクロールするとnot-homeが消えてしまい、onWindowScrollの処理が優先されます。
そのため、ページトップまでスクロールするとfixedクラスも消え、透明なヘッダーになります。

トップページでは背景が動画のため、下へスクロールするまでは背景透明の白文字ヘッダーで良いのですが、トップ以外のページでは背景が白なので、ヘッダーが黒でないと文字が見辛く、その問題を解決したいです。

該当のソースコード

 <!-- header.component.html -->
<nav class="float-menu {{navbarStyle}}">
  <div class="head-wrap">
    <div class="pc-menu">
      <div class="ui secondary menu">
        <a class="item" href="#">
          <span class="color:white;">Logo</span>
        </a>
        <div class="right menu">
          <!-- #aboutはhomeページのアンカーリンク -->
          <a href="#about">はじめに</a>
          <a routerLink="/contact">お問合せ</a>
        </div>
      </div>
    </div>
  </div>
</nav>

// header.component.css
.float-menu {
  position: fixed;
  top: 0;
  width: 100%;
  margin: 0 auto;
  z-index: 10;
  transition: all 0.5s ease;
}

.float-menu.fixed {
  background: rgba(0,0,0,.6);
}

.float-menu.not-home {
  background: rgba(0,0,0,.6);
}

// header.component.ts
import { Component, OnInit, HostListener } from '@angular/core';
import { Router, NavigationEnd, Event as NavigationEvent } from '@angular/router';
import { Constant } from '../constant';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  public navbarStyle = 'hidden';

  constructor(
    private router: Router
  ) { }

  ngOnInit() {
    this.router.events.forEach((event: NavigationEvent) => {
      // ページ遷移後の処理
      if (event instanceof NavigationEnd) {
        if (event.urlAfterRedirects.indexOf(Constant.rpContact) >= 0) {
          this.navbarStyle = 'not-home';
        }
      }
    });
  }

  @HostListener('window:scroll', [])
  onWindowScroll() {
    if (window.pageYOffset > 20) {
      this.navbarStyle = 'fixed';
    } else {
      this.navbarStyle = '';
    }
  }
}

// constant.ts
export class Constant {
  //ルーティングパス
  static readonly rpHome = '';
  static readonly rpContact = 'contact';
}

// app-routing.module.ts
import { RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';
import { HomeComponent } from './home/home.component';
import { ContactComponent } from './contact/contact.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'contact', component: ContactComponent }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      scrollPositionRestoration: 'enabled',
      anchorScrolling: 'enabled',
      scrollOffset: [0, 0]
    })
  ],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule {}

開発環境

Angular CLI: 10.0.6
Node: 12.18.3
OS: darwin x64

Angular: 10.0.10
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.6
@angular-devkit/build-angular     0.1000.6
@angular-devkit/build-optimizer   0.1000.6
@angular-devkit/build-webpack     0.1000.6
@angular-devkit/core              10.0.6
@angular-devkit/schematics        10.0.6
@angular/cdk                      10.1.3
@angular/cli                      10.0.6
@angular/material                 10.1.3
@ngtools/webpack                  10.0.6
@schematics/angular               10.0.6
@schematics/update                0.1000.6
rxjs                              6.6.2
typescript                        3.9.7
webpack                           4.43.0

見様見真似で書いたコードで分かりづらく申し訳ありません。
また、初めて質問するので至らない点も多々あるかと思います。
どなたかAngularやTypeScriptの書き方に詳しい方、お知恵をお貸し下さい。
よろしくお願い致します。

Answer 1

onWindowScrollの処理が優先されます。

優先というか、
ngOnInitの処理は遷移後最初しか行われません。
対して、@HostListener('window:scroll', [])の処理は、
スクロールの度に処理が実行されるので、そちらの処理が有効になるのは当然の話です。

コメントを受けまして、考え方と、例示をします。
homeかどうかを、クラスプロパティとして、保持し、それをもって、
スクロール20px以内時のクラス名を動的に変更とすればいいかと。
下記構文でいかがでしょうか。

// 上部構文は省略

export class HeaderComponent implements OnInit {
  public navbarStyle = 'hidden';
  // ホームかどうかをbooleanで保持するためのプロパティ
  private homeFlg = true;

  constructor(
    private router: Router
  ) { }

  ngOnInit() {
    this.router.events.forEach((event: NavigationEvent) => {
      // ページ遷移後の処理
      if (event instanceof NavigationEnd) {
        if (event.urlAfterRedirects.includes(Constant.rpContact)) {
          this.navbarStyle = 'not-home';
          this.homeFlg = false;
        } else {
          this.homeFlg = true;
        }
      }
    });
  }

  @HostListener('window:scroll', [])
  onWindowScroll() {
    if (window.pageYOffset > 20) {
      this.navbarStyle = 'fixed';
    } else {
      this.navbarStyle = this.homeFlg ? '' : 'not-home';
    }
  }
}

つまりは、homeかどうかを保持しておき、その真偽によって、当てるクラス文字列を変える、という感じです。
あとは、もし条件を増やしたいとなれば、
ngOnInitメソッド中にて、switch構文によって、条件を入れ替えたり、すればいいかと。

---- 以下元構文回答 ----

onWindowScrollの処理中の、
this.navbarStyle = '';を
this.navbarStyle = 'not-home';にすればいいのではないでしょうか？

Comments

[sunny_day]

こんなに早く回答して頂きありがとうございます！
まだまだ理解が乏しいので、大変ためになります。

onWindowScrollの処理では、スクロールが20未満の時に「this.navbarStyle = '';」とすることでクラスを付けず、透明なヘッダーにしています。
その為、そこにnot-homeを入れると全ページで反映されるので『ページごとに色を変える』という目的から離れてしまいます。
言い方を変えると、URLがhomeページで、スクロール位置が20未満の時だけヘッダーを透明に出来れば良いのですが、難しいですかね…。

[miyabi_pudding]

あ、なるほどですね。
つまり、本質問のコンポーネントは、全ページで読み込んでいるコンポーネント、ということですね？
回答修正してみます。

[sunny_day]

はい、そうです。
ヘッダーコンポーネントは全ページ共通で読み込んでいます。
お手数おかけします。ありがとうございます！

[miyabi_pudding]

回答追記しました。
もし、条件など食い違うのならば、
考え方のみ参考にし、自身で条件などを組み直してください。
また、文字列の存在有無の確認は、
includesの方がより簡単に確認できます。
（JS上での割と新しめのメソッドですが、TypeScriptでもあります）

[sunny_day]

丁寧な回答ありがとうございます。
ご提示頂いた考え方で条件を変えるのもうまくいきました。
3日間悩んでいたので、ここまで詳しく教えて頂けて大変感謝しております！