在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包含在每个组件中，并仅将其作为输入传递，以确定在其中是否应显示项目更好呢？

- Kasper Juner

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' }
];

在上面的示例中，使用LayoutComponent来显示PageComponent，而OtherPageComponent则不使用。这样，您可以根据当前路由选择何时显示布局。

如果在同一路由下顶部栏可以显示或隐藏，则我认为这是一个状态问题，因此将其存储在服务中的Subject中是有意义的。

- Cédric Rémond

Answer 2

我认为你走在了正确的道路上。您可以按照以下方式定义布尔字段来显示或隐藏应用栏：userIsLogged。

<app-top-bar *ngIf="userIsLogged == true"></app-top-bar> 
<div class="container px-0 px-sm-3">
  <router-outlet></router-outlet>
</div>

- Akif