当选择路由器链接时关闭md-sidenav

Question

我正在研究一个角度项目，我已经实现了像side-nav这样的角度材质组件。 side-nav包含ul li元素，链接嵌套，路由器链接不是href。我的问题是，当我选择一个链接转到另一个视图时，我想调用side nav来切换和关闭。因为它总是保持开放

Answer 1

选项1：

每当路由器事件发生，您可以订阅Router事件和关闭sidenav。

代码：

需要这些进口：

在组件类

import { Component,ViewChild, OnInit, } from '@angular/core'; 
import { Router, RouterModule } from '@angular/router'; 
import { MdSidenav, MdSidenavModule } from '@angular/material'; 

：

@ViewChild(MdSidenav) sidenav: MdSidenav; 

    title = 'Tour of Heroes'; 

    constructor(private appService: AppService, 
       private _router: Router){ 
    } 

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

demo

选项2：

添加一个click事件到每个li关闭sidenav点击。

HTML：

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

demo 2