导航栏折叠在小屏幕上不起作用。我单击菜单右侧出现的按钮,但没有任何反应。我查找了其他解决方案,并更改了我的 angular.json 文件。
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
这是我的 .html 代码:
<header class="navbar bg-main-bg pt-0 pb-0 mt-0 mb-0" style="z-index: 1000; height: 80px;">
<nav class="container navbar-expand-md h-100">
<a class="navbar-brand" href="#" style="margin-right: 120px; height: 50px;">
<app-coin [width]="50" [height]="50" text="A"></app-coin>
<h1 class="position-relative text-txt-h" style="line-height: 50px; left: 52px;">LBAR</h1>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarToggler" class="collapse navbar-collapse h-100">
<ul class="navbar-nav h-100 text-uppercase">
<li class="nav-item">
<a class="nav-link h-100 pr-5 pl-5" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}" routerLink="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link h-100 pr-5 pl-5" routerLinkActive="active" routerLink="/work">Work</a>
</li>
<li class="nav-item">
<a class="nav-link h-100 pr-5 pl-5" routerLinkActive="active" routerLink="/contact">Contact</a>
</li>
</ul>
</div>
</nav>
</header>
但是,好像还是不行。当屏幕缩小时,页面的链接就会消失,并且通常导致链接出现的图标也不起作用。我知道您设置折叠值的解决方案 here ,但这也不起作用。有什么方法可以让导航栏折叠起作用吗?
最佳答案
除了使用 ng-boostrap 之外,我还必须使用此处提供的解决方案 https://www.youtube.com/watch?v=m5fdwxB-jIM
总之,我必须将 html 文件中的代码更改为:
<button class="navbar-toggler" type="button" (click)="isCollapsed = !isCollapsed" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" [attr.aria-expanded]="!isCollapsed" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent" [ngbCollapse]="isCollapsed">
在 .ts 文件中
public isCollapsed : boolean = true;
关于Angular 和 Bootstrap 导航栏折叠不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69458704/