Angular 4材料Sidenav在被选中后不会关闭菜单

Question

我正在使用角度材料Sidenav它运作良好,但问题是选择一个选项后菜单仍然打开.这很奇怪,这意味着用作小型设备的导航,而doc没有任何使用链接的示例

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>

基本上,我必须加载关于页面的内容,并在点击链接时关闭菜单,我不知道我是否必须手动或是否有任何我可以使用的指令或属性

Answer 1

选项1:

你在(click)="sidenav.close()"里面添加<a>,当用户选择"关于"时,它会关闭sidenav.

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

演示

如果您不想click在每个<a>或多个事件中添加事件<li>,则可以将click事件放入其中<ul>.Sidenav将关闭任何<li>点击/选中的内容<ul>.

<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中检查此代码的实现.