Angular2 菜单引导程序

Question

我用切换构建了一个菜单，它工作正常。当用户单击链接时，我希望菜单再次折叠。我通过制作自己的函数来做到这一点，这也有效。

我现在遇到的问题是，当菜单折叠时，切换会使用一个很好的过渡。我使用显示和隐藏，所以没有过渡，我认为过渡 w 是由引导程序中的 css 调节的，但我认为情况并非如此。

当链接被单击时，我如何在菜单中添加一个漂亮的过渡。

这是我的代码：

<nav class="navbar navbar-default  navbar-static-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">MyMenu</a>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNav" >
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="myNav">
            <ul class='nav navbar-nav navbar-right'>
                <li><a [routerLink]="['/info']" (click)="closeMenu()"></span><br/>Info</a></li>
                <li><a [routerLink]="['/aboutus']" (click)="closeMenu()"><br/>aboutus</a></li>
                <li><a [routerLink]="['/contact']" (click)="closeMenu()"><br/>contact</a></li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

按照我的评论： 如果要折叠菜单，请使用 Jquery 执行此操作：

$('.nav a').on('click', function(){
    $('.btn-navbar').click(); //bootstrap 2.x
    $('.navbar-toggle').click() //bootstrap 3.x 
});

并将 Jquery 用于您的组件，在导入下方，执行

declare var $: any;