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

发布时间：2020-12-17 17:06:22 所属栏目：安全来源：网络整理

导读：我正在使用 angular Material Sidenav它运行良好,但问题是选择一个选项后菜单仍然打开.这很奇怪,这意味着用作小型设备的导航,而doc没有任何使用链接的示例 App.component md-sidenav-container md-sidenav #sidenav class="sidenav" mode="over" ul class="s

我正在使用 angular Material 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>

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

解决方法

选项1：

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

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

demo

如果您不想在每个< 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中检查此代码的实现.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!