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

Question

我正在做一个有角度的项目，我已经实现了像侧边导航这样的有角度的 Material 组件。 side-nav 有 ul li 元素，其中链接是嵌套的并且是路由器链接而不是 href。我的问题是当我选择一个链接转到另一个 View 时，我想调用侧导航来切换和关闭。因为它始终保持打开状态

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:

为每个 li 添加一个 click 事件以在点击时关闭 sidenav。

html:

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

demo 2