选择路由器链接时关闭 md-sidenav [英] Closing md-sidenav when router link is selected
问题描述
我正在做一个有角度的项目,我已经实现了有角度的材料组件,比如侧导航.side-nav 有 ul li 元素,其中链接是嵌套的并且是路由器链接而不是 href.我的问题是,当我选择一个链接转到另一个视图时,我想调用侧导航来切换和关闭.因为它总是保持打开状态
I am working on an angular project, I've implemented angular material components like the side-nav. The side-nav has ul li elements, where the links are nested and are router links not href. my question when I select a link to go to another view, I want to make a call to side nav to toggle and close. cause it always remains open
推荐答案
选项 1:
您可以订阅 Router
事件并在路由器事件发生时关闭 sidenav.
You can subscribe to Router
events and close sidenav whenever router event takes place.
代码:
需要这些导入:
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();
});
}
选项 2:
为每个 li
添加一个 click
事件以在点击时关闭 sidenav.
Add a click
event to each li
to close sidenav on click.
html:
<ul class="sidenav">
<li class="sidenav__list">
<a class="sidenav__list__link " (click)="sidenav.close()" >about</a>
</li>
</ul>
这篇关于选择路由器链接时关闭 md-sidenav的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!