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

【问题标题】：Load multiple componant on the same page Angular 2在同一页面上加载多个组件Angular 2
【发布时间】：2017-06-24 18:33:01
【问题描述】：

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

这些内容将是块，如附图所示，导航栏包含 4 个操作（Form、test1、details ...）

中间的内容会显示一切，但是当我点击表单时，表单会显示在中间，当我点击详细信息时，会在中间显示详细信息块。

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

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

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

感谢您的帮助，

【问题讨论】：

【解决方案1】：

所以从本质上讲，您需要大量组件，其中包含一个不能真正导航的菜单，但更多的是显示或隐藏内容的切换按钮？页面刷新应该做什么？如果您看到相同的组件，这有关系吗？如果是这样，您要么必须将状态存储在本地存储/会话存储/使用 ngrx...，要么必须将显示的项目添加到路由并解决这些问题。

无论如何，最终你需要一个组件来决定显示什么，并且所有在它们自己的组件中的块都有自己的选择器，你可以使用 *ngIf 显示/隐藏。

您的 html 基本上如下所示：

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

【讨论】：

其实我现在拥有的，就是左边的导航栏，当我点击联系人时，联系人组件显示在中间，其他动作也一样。而我现在要做的是将所有组件放在同一页面上，然后单击按钮（导航栏）或向下/向上滚动以查看我想要的组件。
啊等等，你想一直显示它们，并且基本上让导航栏只是滚动？但是刷新页面时也想滚动到那里？尽管如此，我还是会使用路由器来决定你想在页面初始化时滚动哪个组件。
查看我在第一条评论中附加的图像，您会在中间看到一个表单块，当我向下滚动时，我会看到测试块，并且sidenav中的测试按钮将是活跃（改变颜色）