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

Question

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

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

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

Answer 1

创建导航项模型

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

之后你有两个选择，从数据库中提供它，或者根据模型创建新的项目。

主类中的第二个选项：

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 跨订阅提供它。