Question

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

我正在使用带有引导程序4的角度2。

我已尝试过bootstrap 4个例子，但它们似乎在使用角度2时效果不佳（Dropdown不起作用）。这是当我发现角度团队实际上已经在他们自己的框架上工作以与引导程序集成时称为ng-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]指令并将其绑定到名为collapse的布尔变量来完成此操作。我们在单击按钮时切换折叠，并在选择菜单项时将其设置为false。

这个答案改编自几年前有人在同一主题上给出的早期答案（遗憾的是我找不到），但答案是针对Bootstrap 3.x和AngularJS（1.x）。

Answer 2

我不知道它是否仍可以与Angular 2一起使用，但我正在使用...

角度8
Bootstrap 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;
}

我希望这会有所帮助。欢迎反馈，并表示赞赏。：）

响应式导航栏，带有角度2和自举4

2 个答案: