我正在将 ng-bootstrap 与 Angular 8 一起使用,但导航栏出现问题。单击汉堡包图标时,导航栏在响应和打开/关闭方面的行为正确,但问题是当单击其中一个链接或用户单击导航栏的“外部”时,它不会“自动关闭”。只有当用户再次点击汉堡包时它才会关闭。有没有办法使用 ng-bootstrap 使导航栏在点击时自动关闭?
在我的研究中,我发现了许多关于如何使用 Angular 4+ 和 ng-bootstrap 设置导航栏的示例,我注意到即使是“正确”的示例也存在相同的问题。甚至可以在单击时自动关闭导航栏吗?这里有些例子:
这是我使用 ng-bootstrap 为导航栏找到的典型代码:
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" (click)="isNavbarCollapsed = !isNavbarCollapsed" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div [ngbCollapse]="isNavbarCollapsed" class="navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
以下是 plunker 和 stackblitz 示例:
http://plnkr.co/edit/PlGTWzSGqawgQC2wfKp8?p=preview
https://stackblitz.com/edit/angular-ww6oap
在这两个示例中,您都会看到导航栏可以工作,但单击链接或导航栏外的链接不会关闭它。只有再次单击汉堡包图标才能关闭它。
最佳答案
我想到了。我们可以将它添加到 routerlinks 以将 isNavbarCollapsed 变量设置为 true:
(click)="isNavbarCollapsed = true"
总的来说,它看起来像这样:
<div class="collapse navbar-collapse" [ngbCollapse]="isNavbarCollapsed" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" [routerLink]="['/dash/', someParam]" (click)="isNavbarCollapsed = true">Dashboard <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/archive" (click)="isNavbarCollapsed = true">Archive</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/help" (click)="isNavbarCollapsed = true">Help</a>
</li>
</ul>
</div>
希望能帮助别人。这项技术目前 (2019-06-18) 未包含在 ng-bootstrap 文档中,因此当 ng-bootstrap 导航栏处于响应状态(汉堡菜单)时,关闭它的最佳实践是什么方法并不清楚.
关于angular - NG-bootstrap 4 with Angular 8 : Navbar works, 但在点击时不会自动关闭(在导航栏内部或外部),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56569453/