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

Posted 2021-04-24

我正在开发一个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>

答案

请参阅How to get current route您可以从sideNav的父组件或sideNav本身以及模板上的Router读取*ngIf对象的路径：

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

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

另一答案

看起来像壳组件的合适案例。您可以创建一个将覆盖应用程序整个区域的应用程序。在这里你可以有一个<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。然后会有ComponentApp将有side-nav和低于那个，另一个<router-outlet></router-outlet>将加载Component1-Component5，Component9和Component10。

在你的情况下，只有一个问题是，你将不得不考虑子组件在子路径下。

Deborah Kurata有一个非常有趣的NGCONF Talk关于这个和其他几个路由器相关的概念，我建议你看，以便更好地理解。