Angular2菜單引導

我已經建立一個切換菜單，它工作正常。當用戶點擊鏈接時，我想讓菜單再次摺疊。我通過使我自己的功能這也做到了這一點。Angular2菜單引導

我現在的問題是切換菜單崩潰時使用了一個很好的轉換。我使用顯示和隱藏，所以沒有過渡我認爲過渡w由bootstrap中的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>

來源

2017-06-09 user3356007

Bootstrap應該管理過渡。如果沒有，那麼你忘了一些東西！嘗試複製粘貼他們的導航，看看過渡是否有效。如果確實如此，那麼請仔細看看你錯過了什麼。如果你想讓自己的功能崩潰，我建議你看看[Angular transitions]（https://angular.io/docs/ts/latest/guide/animations.html） – trichetriche

@trichetriche yes bootstrap會當你點擊切換按鈕，但我也想使用過渡時，一個menulink點擊有一個平滑的崩潰 – user3356007

對不起，我沒有得到它，請看我的回答 – trichetriche

按照我的意見：如果你想摺疊菜單，使用jQuery這樣做：

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

和使用jQuery到您的compononent，下方進口，做

declare var $: any;

來源

2017-06-09 10:51:08 trichetriche

他正在尋找Angular2可能的解決方案。你可以請用angular2（打字稿）更新它。 –

這是Angular2解決方案。 JQuery是一個Javascript庫，意味着你不能在Typescript中使用它，除非像這樣聲明一個變量。你仍然可以參考'JQueryStatic'，但這不是他所問的。 – trichetriche

@trichetriche我在哪裏添加jqeury在我的組件？ – user3356007

Angular2菜單引導

回答

相關問題