Angular 根据当前模块改变页眉和页脚

Question

目前我的应用程序非常简单，只有一个模块，但我希望通过管理仪表板对其进行扩展。从高层次的角度来看，我计划分成 2 个模块：一个用于面向客户的站点，另一个是授权的惰性管理模块，如下所示： Client and admin module diagram

我不知道应该如何为网站的这两个部分设置页眉和页脚组件。对于单模块、单“部分”网站，通过将它们放在 app-component.html 中，很容易在整个应用程序中拥有统一的页眉和页脚，如下所示：

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

我的问题是，当我在管理部分时，我想要一个不同页眉和页脚组件，而不是在“主”站点时。

到目前为止我一直在考虑这些想法：

从 auth-service 中获取 isLoggedIn 布尔值以根据站点部分改变页眉和页脚内容。
- 这相当直截了当，但感觉像是一种 hack 并公开了我更愿意在 auth guard 后面的代码。
在应用程序的每个“视图”组件中，手动放置 app-header 和 app-footer 组件。
- 同样，这感觉像是一种 hack，而且会很乏味，但我的应用程序实际上只有 5-10 个单独的视图页面，因此它是易于管理的。
使用 3 个路由模块：main-router、client-router 和 admin-router。主路由器将在 app-client-component 和 app-admin-component 之间定向，每个路由器的模板内容基本上都是上述 app-component.html，但路由器将分别是客户端和管理路由器。
- 这感觉是最好的长期解决方案，但我觉得应该有一个更简单的解决方案。

如果有人以前遇到过这个问题或对我应该如何构建它有任何见解，将不胜感激！

Answer 1

您可以创建不同的布局并重复使用它们。您的组件对页眉和页脚一无所知 - 布局选择在路由器配置中。看到这个 link： https://medium.com/angular-in-depth/angular-routing-reusing-common-layout-for-pages-from-different-modules-440a23f86b57

Angular vary header and footer based on current module