繁体   English   中英

相同类型的多个组件,在Angular 2中访问共享资源

[英]Multiple Components of the same type, accessing a shared Resource in Angular 2

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

我的问题主要来自以下事实:我在互联网或文档中看到的所有角度示例都是基本示例,传递字符串消息而不是Arrays段。

首先,App的基本架构是这样的:

(应用根)

(儿童1)| (儿童2)| ... | (孩子n)|

我有我的AppComponent,并且在HTML模板中嵌套了一些ChildComponent,它们是用* 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共享了它们的数据,并且没有重复项(除非{info for ChildComp}被重复)。

对我来说,这似乎是一个并行的资源访问问题,但是问题是我还没有找到一种方法来分离生成的ChildComponents并授予它们访问权限。

您对这个问题的看法将不胜感激。 (由于我尚未执行任何操作,而我仍停留在应用程序组件映射阶段,因此我尚未发布代码)

@ViewChildren->可行,但是当涉及到DOM更改时,它会变得非常混乱,尤其是当您收到“检查后表达式已更改”错误时...

共享服务并发出Subject值->简洁的方法,但是对索引对象的部分有点混乱。

* ngFor和@Input传递索引和其他数据->到目前为止的最佳解决方案!

使用解析器->出色的方法,但是仅当您准备好数据且不希望按需使用时才使用。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM