Question

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

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

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

1 个答案: