导航栏切换不适用于Angular 4 / ng-bootstrap

胸罩84

在我的angular 4项目中使用ng-bootstrap

<navbar class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <button aria-controls="navbarsDefault" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler navbar-toggler-right" data-target="#navbarsDefault" data-toggle="collapse" type="button">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a> 
    <div class="collapse navbar-collapse" id="navbarsDefault">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link active" routerlink="/dashboard" routerlinkactive="active" ng-reflect-router-link="/dashboard" ng-reflect-router-link-active="active" href="/dashboard">Dashboard</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" routerlink="/program" routerlinkactive="active" ng-reflect-router-link="/program" ng-reflect-router-link-active="active" href="/program">Programm</a>
            </li>          
        </ul>
    </div>
</navbar>

导航栏在那儿,它反应灵敏,工作正常。但是,当折叠时,导航栏切换按钮不会切换导航栏,而我找不到错误。

jmiguel77

我最终做了这样的事情:

在html模板中,我有以下代码:

 <nav id="mainNavbar" class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse"
           data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
           aria-expanded="false" aria-label="Toggle navigation"
           (click)="toggleCollapsed()">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div id="navbarSupportedContent" [ngClass]="{'collapse': collapsed, 'navbar-collapse': true}">
            ......
        </div>
</nav>

在组件中我有这个

export class NavComponent {
     collapsed = true;
     toggleCollapsed(): void {
       this.collapsed = !this.collapsed;
     }
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何使用ng2-bootstrap从Bootstrap 3切换到Bootstrap 4?

Bootstrap 4-使用切换按钮将链接移至导航栏的右侧

具有独立导航栏链接的Bootstrap 4导航栏切换器

导航栏未在使用ng-bootstrap和angular 4的浏览器中呈现

Bootstrap 4可切换导航栏

Bootstrap 4导航栏切换器未显示

导航栏下拉菜单不适用于Angular和Bootstrap 4

防止项目在Bootstrap 4导航栏切换中崩溃

导航栏中带有ng-bootstrap(4)angular 2(cli)的下拉切换问题

Bootstrap 4导航栏即使在切换时也保持右侧

Bootstrap数据切换不适用于移动设备

Bootstrap Accordion示例不适用于Angular 4 [innerHTML]

Bootstrap 4导航栏切换按钮无法正常工作

ng-bootstrap下拉位置不适用于angular 7

Bootstrap4导航栏切换无法正常工作

如何在悬停时更改bootstrap 4导航栏切换器的颜色?

Bootstrap导航栏切换不适用于Laravel

Angular 2 不适用于 Bootstrap 3 或 4

悬停时显示 div 不适用于 Bootstrap 4 导航

Bootstrap 4 导航栏切换在 iPad 中不显示

Bootstrap 4 轮播隐藏导航栏切换器

Bootstrap 4 导航栏不适用于 angular 5

在 angular 4 中使用 bootstrap 4 或 ng-bootstrap 组件

Bootstrap 4 在移动设备上最右侧设置折叠切换器导航栏

ng bootstrap typeahead 不适用于角度反应形式

使用 Bootstrap 4 在大屏幕上的导航药丸和小屏幕上的导航栏导航之间切换

Datepicker 不适用于 bootstrap 4

导航栏切换器不适用于 Bootstrap 4

Bootstrap 4 导航栏切换按钮在位于特定站点时不起作用