如何在angular2中滚动时创建一个向下滑动的菜单栏

Question

我想在angular2中创建一个向下滑动导航条，这样如果它向下滚动，菜单就会消失，然后在向上滚动时菜单栏会重新出现。

<div class="nav-bar>
  <a href="#">Hello</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</div>

我不知道如何在angular2 typescript组件中解决这个问题。

Answer 1

创建mavigation项目模型

export class Navigation {
 id: number;
 title: string;
 displayed: boolean;
 url: string;
}

之后，您有两个选项，从DB提供，或根据模型创建新的项目。

主要类别中的第二个选项：

nav[]: Navigation[] = [];

constructor(public navigation: Navigation) {
let navigationHome = new Navigation(); 
navigationHome = {
 id:1,
 title: "home",
 displayed: true,
 url: "/home"
}
  [...]


this.nav.push(navigationHome, [...])
}

在路由器html中以HTML格式显示。我这样做了，但是我通过订阅从db提供服务。