angular - 如何在 AppComponent 级别有不同的布局？

Question

我创建了一个在 AppComponent 中有一个菜单的应用程序，这意味着所有子页面/组件都将根据下一个伪代码拥有它：

<menu></menu> <--I need this removed in the new page-->
<router-outlet></router-outlet>

现在我需要一个没有菜单的新页面。我怎样才能实现它？

我希望能很好地解释我的问题。提前致谢。

标签： angularrouter-outlet

Answer 1

我为您制作了一个小应用程序，向您展示如何实现您的行为

编辑

解释

您创建一个服务并将该服务注入到您的 app.component 中。根据您订阅的可观察值，您将在 app.component.html 中使用此服务来显示菜单或不显示菜单。

当您需要隐藏/显示菜单时，您可以使用生命周期钩子 OnInit和OnDestroy.

• OnInit ：组件需要隐藏菜单，使用你的服务。
• OnDestroy 组件不再存在，你需要带回菜单，使用你的服务。