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