Question

我正在开发角度4.0的第一个应用程序。

我的问题很简单，但我想知道是否有最好的做法来解决我的问题。

我有一个位置标题：＆＃39;已修复＆＃39;当用户滚动页面时，这个元素通过添加一个小的＆＃39;来改变它的一些属性（高度，背景大小......）。类动态。

这是我的组件

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>

一切正常但这应该仅在主页中发生。在另一页中，标题元素应该已经位于＆＃39; small＆＃39;没有任何基于滚动事件的DOM操作的状态。

我正在考虑检查当前路由以设置其他变量（如果当前路由与主页路径匹配则为false，否则为true）并将其与scrollState一起放入OR中。像这样：

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

然而，通过这样做，我无法避免在降低性能方面给听众带来影响。

什么是最好的方法来避免在没有必要的内部页面中调用监听器？

Answer 1

好吧，我会使用ActivatedRouteSnapshot

来做到这一点

@Component({...})
class Header implements OnInit {
  readonly snapshot: ActivatedRouteSnapshot = null;

  constructor(private route: ActivatedRoute) {
    this.snapshot = route.snapshot;
  }

  ngOnInit() {
    // if this.snapshot is HOMEPAGE
    // then
    // subscribe to the scroll and switch class when you need.
  }
}

您还可以在route.data上设置一个属性，告诉您动画标题。

const routes: Routes = [
  {
    path: '',
    component: HomeRouteComponent,
    data: { ANIMATE_HEADER: true }
  }
];

// header.ts
ngOnInit() {
  if(this.snapshot.data.ANIMATE_HEADER) {
    // do stuff here
  }
}

仅在角度为

1 个答案: