如何仅在某些页面上隐藏我的左导航菜单
我正在做一个angular5/html 5项目。我有一个侧导航菜单组件，显示在我的应用程序的所有页面。问题是，这个侧导航菜单组件是动态的，如果有更多的页面被添加到应用程序中，就会自动更新。
现在我要做的是只在某些页面上隐藏这个菜单。例如，我希望在第1-5页上保持可见，隐藏在第6-8页，在第9和第10页再次可见。
这是我为侧导航菜单编辑的html代码：
<aside>
<div class="sidebar">
<nav>
<div class="sidebar__wrap">
<ol class="left-nav">
</ol>
</div>
</nav>
</div>
</aside>回答 2
Stack Overflow用户
发布于 2018-08-30 18:52:21
请参阅如何获得当前路线，您可以从Router对象中从sideNav的父组件读取路由，或者在模板上的sideNav本身和*ngIf中读取路由：
constructor(router: Router) {
router.events.subscribe(event => {
if (router.url === 'SOMEROUTE') {
this.showSideNav = false;
}
}
}然后将*ngIf设置在您的侧导航到showSideNav。
Stack Overflow用户
发布于 2018-08-30 19:20:10
对于Shell组件来说，这是一个合适的情况。您可以创建一个可以对应用程序的整个区域进行打包的程序。在这种情况下，您可以拥有一个<router-outlet></router-outlet>，它可以在没有侧导航的情况下托管所有页面。
对于您想拥有侧导航的页面，您可以创建一个父路径(比如/app)，然后在其子路径中为您想要侧导航的页面定义路径。
所以您的routeConfig看起来应该是：
const APP_ROUTES: Routes = [
{ path: '6', component: Component6 },
{ path: '7', component: Component7 },
{ path: '8', component: Component8 },
{ path: 'app', component: ComponentApp, children: [
{ path: '1', component: Component1 },
{ path: '2', component: Component2 },
{ path: '3', component: Component3 },
{ path: '4', component: Component4 },
{ path: '5', component: Component5 },
{ path: '9', component: Component9 },
{ path: '10', component: Component10 },
]}
];现在，在AppComponent的模板中，添加一个<router-outlet></router-outlet>。这应该是加载ComponentApp、Component6、Component7和Component8。然后是具有side-nav的ComponentApp，以及将加载Component1-Component5、Component9和Component10的另一个<router-outlet></router-outlet>。
在你的情况下，只有一件事会成为问题，那就是，你必须考虑到子部件在一个子路由下。
Deborah有一个非常有趣的NGCONF谈话关于这个和其他几个路由器相关的概念，我建议您观看，以获得一个更好的理解。
https://stackoverflow.com/questions/52103525
复制相似问题
腾讯云开发者
