带有角度 2 和引导程序 4 的响应式导航栏答案

【问题标题】：Responsive navbar with angular 2 and bootstrap 4带有角度 2 和引导程序 4 的响应式导航栏
【发布时间】：2017-01-19 07:55:41
【问题描述】：

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

我使用 angular 2 和 bootstrap 4。

我已经尝试过 bootstrap 4 示例，但它们似乎不适用于 angular 2（下拉菜单不起作用）。这是当我发现 Angular 团队实际上一直在开发他们自己的框架以与称为 ng-bootstrap 的引导程序集成。但是，那里没有关于响应式导航栏的内容。

有没有一种快速简便的方法来构建这样的导航栏，而无需通过检查屏幕大小和改变周围的东西来手动完成？

【问题讨论】：

标签： twitter-bootstrap angular responsive-design

【解决方案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] 指令并将其绑定到一个名为 collapse 的布尔变量来做到这一点。我们在单击按钮时切换折叠，并在选择菜单项时将其设置为 false。

此答案改编自几年前有人就同一主题给出的较早答案（遗憾的是我找不到），但该答案适用于 Bootstrap 3.x 和 AngularJS (1.x)。

【讨论】：

简单优雅的 Angular 和 bootstrap 组合。我想知道为什么导航栏不属于ng-bootstrap library
你有在导航栏中使用下拉菜单来实现类似 Angular 4/bootstrap 4 beta 的示例
@Abhi，不幸的是我没有那种类型的例子。您是否指的是此页面getbootstrap.com/docs/4.0/components/navbar/#bd-example 上的“您也可以使用下拉菜单”部分？
@Engineer_Andrew ：它对我有用。你的帖子结束了我的挣扎。谢谢！！！

【解决方案2】：

我不知道它是否仍然适用于 Angular 2，但我正在使用...

角度 8
引导程序 4.5

我的实现结果如下。

...在我的 html 模板中 [header.component.html]


<nav id="mainNavbar" class="navbar navbar-expand-sm navbar-light bg-light">
  <div class="container-fluid">
    <a routerLink="/" class="navbar-brand">APP_NAME</a>
    <button
      class="navbar-toggler"
      type="button"
      data-toggle="collapse"
      data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent"
      aria-expanded="false"
      aria-label="Toggle navigation"
      (click)="collapsed = !this.collapsed"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
    <div
      id="navbarSupportedContent"
      [ngClass]="{ collapse: collapsed, 'navbar-collapse': true }"
    >
      <!-- right nav menus -->
      <ul class="navbar-nav ml-auto">
        <li routerLinkActive="active" class="nav-item">
          <a routerLink="/LINK_1" class="nav-link"> lINK_1 </a>
        </li>
        <li routerLinkActive="active" class="nav-item">
          <a routerLink="/LINK_2" class="nav-link"> LINK_2 </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

...在我的 ts 组件中 [header.component.ts]

import { Component, OnInit} from "@angular/core";

@Component({
  selector: "app-header",
  templateUrl: "./header.component.html",
  styleUrls: ["./header.component.css"],
})
export class HeaderComponent implements OnInit {

  collapsed = true;

  constructor() {}

  ngOnInit() {}
}

...在我的 css 中 [header.component.css]

nav {
  position: sticky;
  top: -2px;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

.navbar {
  margin-bottom: 2px !important;
}

我希望这会有所帮助。欢迎和赞赏反馈。 :)

【讨论】：