顯示/隱藏MD-sidenav通過打字稿代碼

Question

我有一個打字稿碼與他的模板HTML

<button md-icon-button (click)="menuSidenav.toggle()"> 
     <md-icon>menu</md-icon> 
    </button> 
.... 
<md-sidenav-container style="height: 100px"> 
    <md-sidenav align="start" mode="over" #menuSidenav 

，如果我按一下按鈕，它的工作原理，但我想表演和打字稿代碼

隱藏sidenav

你好嗎？

非常感謝東陽我不知道得到的打字稿

Answer 1

否則這種解決方案對我的作品我的情況在我的班級組成：

@ViewChild("menuSidenav") sideNave: any; 

，並在代碼

this.sideNave.open(); 

您怎麼看？

Answer 2

元素 - 在角度，對一些簡單的像隱藏和顯示模板項目，你不想直接在打字稿得到的元素。您應該使用內置的模板指令ngIf：

<button md-icon-button (click)="menuSidenav.toggle()"> 
    <md-icon>menu</md-icon> 
</button> 
.... 
<md-sidenav-container style="height: 100px"> 
    <md-sidenav *ngIf="toggled" align="start" mode="over"> 

的ngIf指令管理隱藏和顯示如果參數的計算結果爲真或假。因此，通過使用一個布爾字段在組件打字稿「切換」，就像你在上述情況下使用的「切換」：

class MyComponent... { 
    ... 
    public toggled = false; 

    toggle() { 
     this.toggled = !this.toggled; 
    } 

文檔：https://angular.io/api/common/NgIf