如何仅在某些页面上隐藏我的左侧导航菜单

I am working on a angular5/html 5 project. I have a side-nav-menu component that displays on all the pages of my app. The thing is that this side-nav-menu component is dynamic and automatically updates if any more pages are added in the app.

我正在开发一个angular5 / html 5项目。我有一个侧面导航菜单组件,显示在我的应用程序的所有页面上。问题是这个侧面导航菜单组件是动态的,并且如果在应用程序中添加了更多页面,则会自动更新。

Now what i want to do is hide this menu only on certain pages. for example i want to remain visible on page 1-5, hidden on page 6-8 and again visible on 9 and 10. How should i do this?

现在我想要做的是仅在某些页面上隐藏此菜单。例如,我希望在第1-5页上保持可见,隐藏在第6-8页,并在9和10再次可见。我应该怎么做?

This is my edited html code for side-nav-menu:

这是我编辑的侧面导航菜单的html代码:

<aside>
  <div class="sidebar">
    <nav>
      <div class="sidebar__wrap">

        <ol class="left-nav">
        </ol>
      </div>
    </nav>
  </div>
</aside>

2 个解决方案

#1

See How to get current route You can read the route from the Router object from the parent component of the sideNav or in sideNav itself and *ngIf on the template:

请参见如何获取当前路由您可以从sideNav的父组件或sideNav本身读取路由器对象的路由,并在模板上读取* ngIf:

constructor(router: Router) {
  router.events.subscribe(event => {
    if (router.url === 'SOMEROUTE') {
      this.showSideNav = false;
    }
  }
}

then set *ngIf on your side nav to showSideNav.

然后将* ngIf设置在你的侧面导航到showSideNav。

#2

Looks like a suitable case for a Shell Component. You can create one that is going to shell the whole area of your App. In this you can have a <router-outlet></router-outlet> which is going to host all the pages without the side-nav.

看起来像壳组件的合适案例。您可以创建一个将应用程序整个区域的shell。在这里你可以有一个 ,它将托管所有页面而不需要侧面导航。

And for the pages that you want to have a side-nav, you can create a parent route(say /app) and then in its children define the routes for the pages that you want to have the side-nav.

对于您想要具有侧导航的页面,您可以创建父路线(比如/ app),然后在其子项中定义您想要具有侧导航的页面的路线。

So your routeConfig would look something like:

所以你的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 },
  ]}
];

Now, in the AppComponent's template, add a <router-outlet></router-outlet>. This is supposed to load ComponentApp, Component6, Component7, and Component8. And then there would be ComponentApp that will have the side-nav and below that, another <router-outlet></router-outlet> that is going to load Component1-Component5, Component9 and Component10.

现在,在AppComponent的模板中,添加。这应该加载ComponentApp,Component6,Component7和Component8。然后会有ComponentApp,它将具有side-nav,而另一个将加载Component1-Component5,Component9和Component10。

Just one thing that is going to be an issue in your case would be, you'll have to consider the children components to be under a sub-route.

在你的情况下,只有一件事情是问题,你必须考虑子组件在子路径下。

Deborah Kurata has a very interesting NGCONF Talk about this and several other router related concepts that I suggest you watch to get a better understanding.

Deborah Kurata有一个非常有趣的NGCONF谈论这个以及其他几个与路由器相关的概念,我建议你观察以便更好地理解。

#1