在同一页面上加载多个组件 Angular 2

Question

我正在开发一个 angular 2 应用程序，为了保持简短，我在左侧和页面的其余部分有一个导航栏，我将显示我的内容。

这些内容将是块，如附加图像中所示，导航栏包含 4 个操作（表单、测试 1、详细信息...）

中间的内容将显示所有内容，但是当我单击表单时，表单将显示在中间，当我单击详细信息时，详细信息块将显示在中间。

用户可以向下和向上滚动以查看块。

我看到在 Angular 2 中我们可以使用 Fragment 来精确定位和我们想要显示的块，但问题是片段功能存在错误。

目前，我有一个路由器插座，它根据导航栏每个按钮上 routerLink 中的 url 更改视图。 如果我想在同一页面上显示所有块/组件，我应该继续使用它吗？

谢谢你的帮助，

这是屏幕截图

Answer 1

所以从本质上讲，您想要多个组件，带有一个并不真正导航的菜单，但更多的是具有显示或隐藏内容的切换按钮？ 页面刷新应该做什么？ 如果您看到相同的组件，这是否重要？ 如果是这样，您要么必须将状态存储在本地存储/会话存储/使用 ngrx... 中，或者您必须将显示的项目添加到路由中并解决它们。

无论如何，最终您需要一个决定显示内容的组件，以及它们自己的组件中的所有块以及您使用 *ngIf 显示/隐藏的自己的选择器。

你的 html 基本上是这样的：

<my-menu></my-menu>
<my-form *ngIf="showMenu"></my-form>
<my-test1 *ngIf="showTest1"></my-test1>