在angular2

Question

上午實現一個可摺疊的側欄轉換HTML jQuery的adminlte儀表板使用jQuery時，側邊欄被隱藏，並使用toggle()

現在我該怎樣做，在angular2

顯示angular2

以前現在用Almaaseed admin lte template

這是我曾嘗試

我有一個破折號板組件

export class DashboardComponent { 
public constructor(private titleService: Title) { 

    } 

    onSidenavigation(){ 
    //i would like to perform toggle 
    } 

這是一個切換顯示

<a href="#" class="sidebar-toggle" data-toggle="offcanvas" (click)="onSidenavigation()" 
    role="button"> 
    <span class="sr-only">Toggle navigation</span> 
    </a> 

我已經this link檢查，但一直無人接聽尚未

Answer 1

你可以做一個CSS最大高度轉換按鈕。使用模板屬性設置動畫高度的CSS類。在點擊按鈕時切換設置類的屬性。像這樣的東西...

<div id="sidebar" [class.sidebar-is-visible]="sidebarIsVisible"> 

<button (click)="sidebarIsVisible = !sidebarIsVisible"> 

#sidebar { 
    max-height: 0; 
    transition: max-height 0.15s ease-out; 
    overflow: hidden; 
} 
#sidebar.sidebar-is-visible { 
    max-height: 500px; 
    transition: max-height 0.25s ease-in; 
}