Question

我正在研究angular5 / html 5项目。我有一个侧面导航菜单组件，该组件显示在应用程序的所有页面上。事实是，该侧面导航菜单组件是动态的，如果在应用程序中添加了更多页面，则会自动更新。

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

这是我为side-nav-menu编辑的html代码：

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

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

Answer 1

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

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

然后将您身边的*ngIf设置为showSideNav。

Answer 2

看起来像是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，{{1} }和Component9。

在您的情况下，唯一要解决的问题就是，您必须考虑子组件位于子路由下。

Deborah Kurata对此有一个非常有趣的NGCONF Talk，我建议您注意其他一些与路由器相关的概念，以便更好地理解。

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

2 个答案: