ng-sidebar（Angular 2）実装の問題

Question

ヘッダーのボタンをクリックして折り畳みサイドバーメニューを左側に表示するには、ng-sidebarを使用する必要があります。

app.component.html

<div class="page-header custom-phead"> 
    <ng-sidebar-container> 
    <ng-sidebar [(opened)]="_opened"> 
     <p>Sidebar contents</p> 
     </ng-sidebar> 

<div ng-sidebar-content> 
<button (click)="_toggleSidebar()">Toggle</button> 
</div> 
</ng-sidebar-container> 
<form class="heading"> 
<input type="text" name="search" [(ngModel)]="search"><input type="image" [src]="'../resource/searchicon.png'"> 
</form> 
</div> 

そしてapp.component.tsで、

 private _opened: boolean = false; 

    private _toggleSidebar() { 
    this._opened = !this._opened; 
    } 

問題があり、ボタンがすべてでそれに加えて、画面に反映されていない、何も起こりません。これを整理してください。

Answer 1

は次のようにあなたのHTMLを変更してください：

<div class="page-header custom-phead"> 
    <ng-sidebar-container> 
    <ng-sidebar [(opened)]="_opened"> 
     <p>Sidebar contents</p> 
    </ng-sidebar> 
    <!-- you can also try to add a div below if your content not visible --> 
    <div style="clear:both;"></div> 
    </ng-sidebar-container> 

    <button (click)="_toggleSidebar()">Toggle</button> 

    <form class="heading"> 
    <input type="text" name="search" [(ngModel)]="search"> 
    <input type="image" [src]="'../resource/searchicon.png'"> 
    </form> 
</div> 

私はng-sidebar-containerの外に<button (click)="_toggleSidebar()">Toggle</button>を取ったことに、注意してください。サイドバーのコンテンツがまだ表示されない場合は、ng-sidebar-containerタグを閉じる直前に<div style="clear:both;"></div>を追加してみてください。 [(opened)]="_opened"とclose()とopen()機能：

は私がトグルサイドバーのための両方の方法を使用しています plunkerを作成しました。あなたのプロジェクトであなたを助けるかもしれません。