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

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

我使用带有引导程序4的角度2.

我已尝试过bootstrap 4个例子,但它们似乎没有用angular 2工作得太好(Dropdown不起作用).这是当我发现角度团队实际上已经在他们自己的框架上工作以与引导程序集成时称为ng-bootstrap.但是,那里没有关于响应式导航栏的信息.

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

您可以将Bootstrap与Angular结合使用来执行此操作.我正在使用Angular 4,但这个解决方案也适用于2.我也使用Bootstrap 4(测试版),我知道如果您使用的是alpha版本,则会有所不同.

标记:

组件:

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).