angular - 在 Angular 中包含导航栏的最佳方式？

Question

在我的 Angular 应用程序中显示导航栏的最佳方法是什么？

现在我已经在 app.component.html 顶部添加了我的 nav-bar 组件，并且通过订阅我正在设置的服务，如果某些项目在导航栏应该或不应该可见..

我的 app.component.html 看起来像这样:

<app-top-bar></app-top-bar> // navbar
<div class="container px-0 px-sm-3">
  <router-outlet></router-outlet>
</div>

但在这一点上，我怀疑是否最好在每个组件中包含 app-top-bar 并且如果项目应该或不应该在它..

Answer 1

我的标准做法是在路由配置中。

您可以将布局组件设置为页面组件的父级。

一个简单的布局组件模板可能如下所示:

<header>
  The header
</header>

<main>
  <!-- Your pages are rendered here -->
  <router-outlet></router-outlet>
</main>

<footer>
  The footer
</footer>

路由声明看起来很酷:

const routes = [
  {
    component: LayoutComponent,
    path: '',
    children: [
      { component: PageComponent, path: 'page' }
    ]
  },
  { component: OtherPageComponent, path: 'otherpage' }
];

在上面的示例中，PageComponent 将使用 LayoutComponent 显示，而 OtherPageComponent 将在没有它的情况下呈现。这样您就可以根据当前路线选择何时显示布局。

如果对于同一条路线，顶部栏可以显示或隐藏，对我来说这是一个状态，因此将其存储在服务的主题中是有意义的。