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

时间:2017-02-07 13:30:13

标签: javascript angular fragment components anchor

我正在处理一个有角度的2应用程序,为了使说明简短,我在左边有一个导航栏,在页面的其余部分,我将显示我的内容。

这些内容将是块,如附图所示,导航栏包含4个动作(Form,test1,details ...)

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

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

我在Angular 2中看到,我们可以将Fragment用于精确锚定以及我们想要显示的块,但问题是片段功能存在错误。

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

感谢您的帮助,

here is the screenshot

1 个答案:

答案 0 :(得分:0)

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

无论如何,最后你想要一个决定显示内容的组件,以及它们自己组件中的所有块,它们都有你自己的选择器,你用* ngIf显示/隐藏。

你的HTML基本上是这样的:

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