浏览器屏幕最小化后，菜单栏切换开关无法在Angular中工作.我在Angular中使用引导程序功能

Question

HTML完全适用于全屏浏览器模式。当我将浏览器调整到较小的大小时，导航栏正在消失，并显示切换，这是预期的行为。现在，如果我点击切换，菜单列表应该按照屏幕大小显示。以下是HTML代码

<nav class="navbar navbar-expand-lg fixed-top">
<button class="navbar-toggler" type="button" 
data-toggle="collapse" data-target="#navigation-bar" 
aria-controls="navbarTogglerDemo03" aria-expanded="false" 
aria-label="Toggle navigation">
<span class="navbar-toggler-icon">&#9776;</span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navigation-bar">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#social">CONNECT</a></li>
<li class="nav-item"><a class="nav-link" href="#who">WHO</a></li>
<li class="nav-item"><a class="nav-link" href="#work">WORK</a></li>
<li class="nav-item"><a class="nav-link" href="#why">WHY</a></li>
<li class="nav-item"><a class="nav-link" href="#customers">CUSTOMERS</a></li>
<li class="nav-item"><a class="nav-link" href="#pricing">PRICING</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">CONTACT</a></li>
</ul>
</div>
</nav>

Answer 1

由于您在angular项目中使用bootstrap css，一种解决方案可能是安装ngx bootstrap from：

npm i ngx-bootstrap --save

在app.module中导入折叠模块：

CollapseModule.forRoot()

然后在你的组件中(我想你有一个导航栏组件.ts或类似的？(

isCollapsed: boolean = false;

最后在导航栏组件的模板中

<button class="navbar-toggler" type="button" (click)="isCollapsed=!isCollapsed">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"  [collapse]="isCollapsed">
... 
</div>

希望这能有所帮助！