Javascript 仅在angular2应用程序的一个页面中检查事件

我正在angular 4.0中开发我的第一个应用程序

我的问题很简单，但我想知道是否有一个最佳实践来解决我的问题

我有一个标题，标题的位置是：“fixed”，当用户滚动页面时，这个元素会通过动态添加一个“small”类来更改它的一些属性（高度、背景大小…）

这是我的组件

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


@Component({
  selector: 'my-header',
  templateUrl: './my-header.component.html',
  styleUrls: ['./my-header.component.css']
})
export class HeaderComponent implements OnInit {

  scrollState: boolean;

  constructor() { }

  ngOnInit() {
    this.scrollState  = false;
  }

  @HostListener('window:scroll', [])
  toggleScrollState() {
    if(window.pageYOffset == 0){
      this.scrollState  = false;
    }
    else{
      this.scrollState  = true;
    }
  }

}

这就是html

<header class="bk-blue clearfix" [ngClass]="{small: scrollState}">
  <a class="sx" href="#">Login</a>
  <a class="dx arrow-down"></a>
  <a class="dx" href="#">It</a>
</header>

一切正常，但这只应发生在主页上。在另一个页面中，header元素应该已经处于“small”状态，没有任何基于scroll事件的DOM操作

我正在考虑检查当前路由以设置一个附加变量（如果当前路由与主页路径匹配，则为false，否则为true），并将其置于或与scrollState一起。大概是这样的：

 <header class="bk-blue clearfix" [ngClass]="{small: notHome || scrollState}">

然而，通过这样做，我无法避免调用侦听器，因为这会导致性能降低

---

对于您来说，哪种最好的方法可以避免在不需要调用侦听器的内部页面中调用侦听器

好吧，我会用

@组件（{…}）
类头实现了OnInit{
只读快照：ActivatedRouteSnapshot=null；
构造函数（专用路由：ActivatedRoute）{
this.snapshot=route.snapshot；
}
恩戈尼尼特（）{
//如果此.snapshot是主页
//然后
//需要时订阅scroll and switch类。
}
}

您还可以在

route.data

上设置一个属性，该属性告诉您是否设置标题动画

const routes:routes=[
{
路径：“”，
组件：HomeRouteComponent，
数据：{ANIMATE_HEADER:true}
}
];
//标题.ts
恩戈尼尼特（）{
if（this.snapshot.data.ANIMATE_头）{
//在这里做事
}
}

我在第一个实现中遇到问题，我无法在构造函数中或使用ngOnInit（）从快照中检索url。我收到一个空数组[]您应该在那里拥有所有内容，但是，如果我包装路由，请尝试查看

路由器事件

。在setTimeout中，我收到所有预期值，但在ngOnInit或构造函数中，所有值（以及自定义数据）都未定义