Angular路由组件向App子组件传值：禁用Header滚动功能

步骤1：给Header组件添加滚动效果控制开关 #

修改header.component.ts，新增输入属性控制滚动变色逻辑的启用状态，同时在滚动监听事件中加入判断：

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

@Component({
  selector: 'app-header',
  templateUrl: "./header.component.html",
  styleUrls: "./header.component.scss"
})

export class HeaderComponent {
  @Input() scrolled: boolean = false;
  // 新增输入属性，默认启用滚动效果
  @Input() enableScrollEffect: boolean = true;

  @HostListener("window:scroll", [])
  onWindowScroll() {
      // 禁用时强制保持初始背景（按需调整scrolled值：要保持白色设为true，保持透明设为false）
      if (!this.enableScrollEffect) {
          this.scrolled = false; 
          return;
      }
      this.scrolled = window.scrollY > 0;
  }
}

步骤2：在App组件中监听路由状态 #

修改app.component.ts，注入Router并监听路由变化，判断当前是否为Profile页面：

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  isProfilePage = false;

  constructor(private router: Router) {}

  ngOnInit() {
    // 监听路由导航完成事件
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      // 根据实际路由路径判断，示例路径为'/profile'
      this.isProfilePage = event.url.startsWith('/profile');
    });
  }
}

步骤3：在App模板中绑定控制属性到Header #

修改app.component.html，将控制开关绑定到Header组件：

<section>
  <app-header [enableScrollEffect]="!isProfilePage"></app-header>
  <router-outlet></router-outlet>
</section>

补充说明 #

• 若需Profile页面Header始终保持白色，将Header组件中this.scrolled = false改为this.scrolled = true即可，对应你的样式逻辑。
• 路由判断请根据项目实际的Profile页面路径调整，比如带参数的路由可以用startsWith替代includes。

内容的提问来源于stack exchange，提问作者ChrisBratherton