多个相同类型的组件,访问Angular 2

时间:2018-01-12 09:52:10

标签: arrays json angular components communication

我对Angular相当新,所以我只需要澄清一些与访问数据有关的事情,这些事件由一个组件的多个实例放置在一个服务中。

我的问题,主要来自于我在互联网或文档中看到的所有角度示例都是基本示例,传递字符串消息而不是数组的部分。

首先,应用程序的基本架构是:

(APP-根)

(Child-1)| (Child-2)| ...... | (儿童-N)|

我有我的AppComponent并嵌套在HTML模板中的是一些ChildComponents,它们是用* ngFor创建的。

我使用了* ngFor,因为我从应用程序的开头就不知道,我必须创建的ChildComponents的确切数量。让我们说我将在API调用后从JSON文件中获取该数字。

来自API调用的JSON文件还具有以下格式的某些信息:

[
{info for ChildComp},
{info for ChildComp},
{info for ChildComp}
]

(正如您所看到的,ChildComponents的数量是JSON数组的长度。)

对于我的第一个问题,我想到的解决方案是从服务中的JSON获取数据,可以通过整个应用程序访问,但后来我遇到了下一个问题:

如何将在JSON文件数组中找到的对象分发到ChildComponents并跟踪哪个Child获取了哪些数据......

我尝试使用parentComponent中的 @input 方法,但问题是我不想传递整个数组,只是它的一部分,我想保留跟踪正在传递的内容,以便我知道ChildComponents获得了他们的数据份额,并且没有找到重复项(除非{Child for ChildComp}重复)。

对我而言,这似乎是一个并行的资源访问问题,但问题是我找不到分离生成的ChildComponents并授予他们访问权限的方法。

您对此问题的看法将受到高度赞赏和欢迎。 (我还没有发布代码,因为我还没有实现任何内容,而且我仍然坚持应用程序组件映射阶段)

1 个答案:

答案 0 :(得分:0)

@ViewChildren - >可行,但当涉及到DOM更改时会变得非常混乱,特别是当你得到"表达在检查后发生了变化时#34;错误...

共享服务并发出主题值 - >很好的清洁方式,但索引对象的部分有点乱。

* ngFor和@Input传递索引和其他数据 - >最新的解决方案!

使用解析器 - >非常好的方法,但只有当您准备好数据并且不希望按需提供数据时。