我已经构建了一个Angular 4 Web应用程序。我希望在移动鼠标时自动隐藏导航栏。有一个例子我想使用https://codepen.io/JFarrow/pen/fFrpg。我在线阅读了一些文档，但我仍然无法弄清楚如何..这是我的navmenu.component.html代码：
<meta http-equiv="pragma" content="no-cache" />
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<div class='main-nav'>
<div class='navbar navbar-inverse'>
<div class='navbar-header'>
<a class='navbar-brand' [routerLink]="['/home']">Navbar</a>
<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
<span (click)="isCollapsed = !isCollapsed">Toggle navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
</div>
<div class='clearfix'></div>
<div class='navbar-collapse collapse' >
<ul class='nav navbar-nav'>
<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/home']">
<span class='glyphicon glyphicon-home'></span> Home
</a>
</li>
<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/login']">
<span class='glyphicon glyphicon-log-in'></span> Log In
</a>
</li>
<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/margin']">
<span class='glyphicon glyphicon-list'></span> Report
</a>
</li>
<li [routerLinkActive]="['link-active']">
<a [routerLink]="['/smart-table']">
<span class='glyphicon glyphicon-list'></span> Smart table
</a>
</li>
</ul>
</div>
</div>
</div>
我的navmenu.component.ts：
import { Component } from '@angular/core';
@Component({
selector: 'nav-menu',
templateUrl: './navmenu.component.html',
styleUrls: ['./navmenu.component.css']
})
export class NavMenuComponent {
public isCollapsed: boolean = false;
public collapsed(event: any): void {
console.log(event);
}
public expanded(event: any): void {
console.log(event);
}
}
我的navmenu.component.css：
li .glyphicon {
margin-right: 10px;
}
/* Highlighting rules for nav menu items */
li.link-active a,
li.link-active a:hover,
li.link-active a:focus {
background-color: #4189C7;
color: white;
}
/* Keep the nav menu independent of scrolling and on top of other items */
.main-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
}
@media (min-width: 768px) {
/* On small screens, convert the nav menu to a vertical sidebar */
.main-nav {
height: 100%;
width: calc(25% - 20px);
}
.navbar {
border-radius: 0px;
border-width: 0px;
height: 100%;
}
.navbar-header {
float: none;
}
.navbar-collapse {
border-top: 1px solid #444;
padding: 0px;
}
.navbar ul {
float: none;
}
.navbar li {
float: none;
font-size: 15px;
margin: 6px;
}
.navbar li a {
padding: 10px 16px;
border-radius: 4px;
}
.navbar a {
/* If a menu item's text is too long, truncate it */
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
我不知道应该在哪里添加代码。网上有关于添加js函数的代码，或者在bootstrap函数中使用了一些buid，只是对我不起作用....
感谢您的帮助。
答案 0 :(得分：1)
有几种方法可以做到，但这就是我要做的。您需要在整个页面或页面的主体/内容部分添加滚动事件侦听器。如果页面的内容部分是它自己的组件，并且导航栏是它自己的独立组件，那么您可能有一个类似这样的模板。
<navbar-component></navbar-component>
<content-component></content-component>
在这种情况下，您可以向内容组件添加滚动侦听器，在滚动发生时切换某些变量，然后在滚动停止时返回它（假设这是您想要的行为）。要做到这一点，您可能需要在滚动期间使用去抖动和超时。类似的东西：
<content-component (scroll)="scrollFunction()"></content-component>
.... and then somewhere in the code for the component that hosts both the navbar and content ...
timeout: any;
isScrolling: boolean = false;
scrollFunction() : void {
this.isScrolling = true;
clearTimeout(this.timeout);
this.timeout = setTimeout(()=> {
this.isScrolling = false
}, 1000);
}
那1000个数字是毫秒数，你可以把它设置为你想要的任何东西，但基本上，该功能只是在用户滚动时将isScrolling变量设置为true，一旦它们停止滚动它最终将被重置那段时间后变假。 clearTimeout事件确保只要滚动继续发生，计时器就会重置为0。如果您使用此方法，那么您可能希望在isScrolling为true时添加一些类的导航栏组件添加类绑定，并在不存在时将其删除。
<navbar-component [class.navbar-hidden]="isScrolling"></navbar-component>
<content-component (scroll)="scrollFunction()"></content-component>
我建议将滚动侦听器添加到特定内容元素而不是文档或窗口对象，因为这会使您的应用程序与DOM更加分离。但是典型的jQuery操作方式是将滚动侦听器添加到整个文档或窗口对象中，并使用它来切换类。如果您的应用程序将保持小而简单并且您知道它将始终在浏览器中使用，那么以这种方式执行它确实没有问题。只需更改
，即可在任何地方添加窗口事件侦听器(scroll)="scrollFunction()"
到
(window:scroll)="scrollFunction()"
如果你的内容组件不是一个单独的组件，并且它包含navbar-component（也就是说，如果你只是使用主体的主app组件，并且在其中有navbar组件），你可以使用HostListener而不是模板事件绑定来侦听事件。因此，不是在HTML中添加“（滚动）”事物，而是导入主机侦听器：
import { Component, HostListener, ....(anything else you have...) } from '@angular/core'
然后在组件中：
@HostListener('scroll') myScrollFunction() {
... same code here as above....
}
这将完成同样的事情，在组件内部检测到滚动事件时触发该功能。您可能希望向导航栏隐藏类添加CSS过渡，因此导航栏可以在视图中整齐地滑动或淡入淡出。 :-)
编辑：我注意到在许多网站上，不是简单地在一段时间不滚动后重新出现导航栏，它们只会在用户开始向上滚动并且始终隐藏在向下滚动。如果你这样做，你可以避免使用超时，只需检查滚动事件，看它是否向上或向下滚动，并根据它切换isScrolling变量。要将事件数据作为参数传递到模板中：<navbar-component [class.navbar-hidden]="isScrollingDown"></navbar-component>
<content-component (scroll)="scrollFunction($event)"></content-component>
然后在你的组件中......
isScrollingDown: boolean;
lastScrollPosition: number;
scrollFunction($event) : void {
let newPosition = $event.srcElement.scrollTop;
if (newPosition <= this.lastScrollPosition){
isScrollingDown = false;
}
else {
isScrollingDown = true;
}
this.lastScrollPosition = newPosition; // store the last position so you can compare the new and old position with each function call
}
scrollTop只是DOM属性的名称，它指定每个元素的滚动位置。
如果您使用HostListener路由，以下是将$ event参数传递给它的方法。
@HostListener('scroll', ['$event']) myScrollFunction($event){
... similar code here...
}