twitter-bootstrap - 带有 Angular 2 和 Bootstrap 4 的响应式导航栏

Question

我正在尝试构建一个网络应用程序，顶部有一个导航栏，并带有一些选项。但是，当在移动设备上查看网站时，导航栏会缩小并出现一个图标，供用户按下以显示选项。与该网站所示的行为完全相同 Responsive website

我正在使用 Angular 2 和 Bootstrap 4。

我已经尝试过 bootstrap 4 示例，但它们似乎与 Angular 2 配合得不太好(下拉菜单不起作用)。这时我发现 Angular 团队实际上一直在开发自己的框架来与名为 ng-bootstrap 的 bootstrap 集成。然而，那里没有任何关于响应式导航栏的内容。

有没有一种快速、简单的方法来构建这样的导航栏，而无需通过检查屏幕尺寸和更改周围的内容来手动完成？

Answer 1

您可以将 Bootstrap 与 Angular 结合起来来执行此操作。我使用的是 Angular 4，但这个解决方案也应该适用于 2。我也在使用 Bootstrap 4(测试版)，我知道如果您使用的是 alpha 版本，情况会有些不同。

标记:

<nav class="navbar navbar-expand-sm navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand/Logo</a>
  <button class="navbar-toggler" (click)="collapse=!collapse" type="button" aria-expanded="false" aria-label="Toggle navigation"
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="navbar-collapse" (click)="collapse=true" [hidden]="collapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
  </div>
</nav>

组件:

import { Component } from '@angular/core';

@Component({
  selector: 'app-nav-bar',
  templateUrl: './nav-bar.component.html',
})
export class NavBarComponent {
  collapse: boolean = true;

  constructor() { }
}

我们在此解决方案中所做的就是摆脱 Bootstrap 折叠插件，并使用在 Angular 中完成的非常简单的版本。我们让 Bootstrap 处理较大屏幕上菜单的显示/隐藏，同时隐藏较小屏幕上的可折叠菜单，直到用户单击切换按钮。我们通过使用 Angular 中的 [hidden] 指令并将其绑定(bind)到一个称为塌陷的 bool 变量来做到这一点。我们在单击按钮时切换折叠，并在选择菜单项时将其设置为 false。

这个答案改编自几年前某人就同一主题给出的早期答案(不幸的是我找不到)，但该答案适用于 Bootstrap 3.x 和 AngularJS (1.x)。