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

Question

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

现在，我已经nav-bar在顶部添加了我的组件app.component.html，并通过订阅我正在设置的服务来确定导航栏中的某些项目是否应该可见。

我的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 将在没有它的情况下呈现。这样您就可以根据当前路线选择何时显示布局。

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