html - How to hide my left nav menu only on certain pages

Question

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.

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?

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

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

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

标签： htmlangularroutesnavigationbar

Answer 1

请参阅如何获取当前路线 您可以从RoutersideNav 的父组件或 sideNav 本身和*ngIf模板上的对象中读取路线：

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

然后设置*ngIf在你身边的导航到showSideNav。