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

Question

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

Answer 1

见您可以从 sideNav 的父组件或 sideNav 本身的 Router 对象和模板上的 *ngIf 读取路线：

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

然后将您这边的导航 *ngIf 设置为 showSideNav。

Answer 2

看起来像 Shell 组件的合适案例。您可以创建一个 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。然后会有 ComponentApp 将有 side-nav 和下面的另一个 <router-outlet></router-outlet> 将加载 Component1-Component5, Component9 和 Component10.

在你的情况下，只有一件事会成为问题，你必须考虑子组件在子路径下。

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

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

How to hide my left nav menu only on certain pages

html

routes

navigationbar

angular