Angular 4材質Sidenav在選擇後沒有關閉菜單

我使用angular Material Sidenav它效果很好，但問題是在選擇一個選項後菜單仍然打開。它是如此奇怪的，這是指爲小型設備導航的使用和使用環節Angular 4材質Sidenav在選擇後沒有關閉菜單

App.component

<md-sidenav-container> 
    <md-sidenav #sidenav class="sidenav" mode="over"> 
    <ul class="sidenav"> 
     <li class="sidenav__list"> 
     <a class="sidenav__list__link " [routerLink]="['about']" >about</a> 
     </li> 

    </ul> 
    </md-sidenav> 

    <header> 
    <div fxHide fxShow.lt-sm> 
     <button class="btn__sidenav" md-button (click)="sidenav.toggle()"> 
     <i class="material-icons md-36">menu</i> 
     </button> 
    </div> 

    </ng-template> 
    </header> 


    <div class="container"> 
     <router-outlet></router-outlet> 
    </div> 
    <wh-footer></wh-footer> 
</md-sidenav-container>

基本文檔沒有任何例子，我必須加載內容關於頁面，關閉菜單鏈接被點擊的時候，我不知道如果我必須做手工，或是否有我可以使用任何指令或財產

來源

2017-08-03 marco gomes

選項1：

您在<a>中添加(click)="sidenav.close()"，當用戶選擇「關於」時，它將關閉sidenav。

<a class="sidenav__list__link " 
    [routerLink]="['about']" 
    (click)="sidenav.close()"> 
    about 
</a>

demo

如果你不想在每一個<a>或<li>添加click事件，你可以把click事件中<ul>。 Sidenav將關閉在該<ul>內點擊/選擇的任何<li>。

<ul class="sidenav" (click)="sidenav.close()"> 
    <li class="sidenav__list"> 
    <a class="sidenav__list__link " [routerLink]="['about']" >about</a> 
    </li> 

</ul>

更新

選項2：

訂閱路由器事件和關閉sidenav當路由器事件發生。

constructor(private _router: Router) {} 

@ViewChild(MdSidenav) sidenav: MdSidenav; 

ngOnInit() { 
    this._router.events.subscribe(() => { 
    if (this.isScreenSmall()) { 
     this.sidenav.close(); 
    } 
    }); 
} 

isScreenSmall(): boolean { 
    return window.matchMedia(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`).matches; 
}

material.angular.io使用此選項。在GitHub repo中檢查此代碼的實現。

來源

2017-08-03 15:45:17 Nehal

這就是我所做的，但如果您在手機上查看他們的網站[angular material]（https://material.angular.io/components），您將看不到任何關閉彈出窗口的事件...這就像背景疊加，如果你點擊它將會關閉菜單..你可以預先製作一些東西 –

感謝您的評論。做了一些更多的研究，我發現你說的，材料網站使用「路由器」事件'而不是'點擊'。我已經更新了答案，以包括該選項:) – Nehal

upvote選項2. @Nehal非常感謝。 – peyman

Angular 4材質Sidenav在選擇後沒有關閉菜單

回答

相關問題