如何安全地重复加载/初始化相同的子组件

时间:2017-08-10 16:56:07

标签: javascript angular

这是一个与Angular 4相关的架构问题,以及如何在角度加载子组件的情况下最好地初始化数据。

方案: 我有一个带有数据表的父组件,当单击表中的任何行时,它会打开3个子组件之一(在侧栏视图中),具体取决于您是否要向表中添加新项,编辑所选行,或者查看有关它的详细信息(基本CRUD功能)。 IOTW,用户可以在处理父组件中的数据表时重复调用相同的3个组件。

通过角度设计,子组件仅在第一次使用组件时运行OnInit生命周期事件。因此,例如,如果我编辑第1行,则编辑'子组件运行它的onInit钩子,但是,如果我随后编辑第2行,则编辑组件中的onInit不会运行,因为该组件已根据角度加载。

为了能够每次初始化子组件中的数据,用户想要做一些事情,比如编辑新选择的行(父数据表操作),I' m在子组件中使用onChanges生命周期钩子。

问题: 我怀疑这种通过onChanges初始化数据的方法是一种反模式,因为onChanges在子组件中反复运行,迫使我对可以放在那里的初始化代码保持警惕。

问题: 是否有更好的方法来加载子组件,这样我就可以在每次由父组件触发时只能一次来可靠地初始化它们?

谢谢,

S上。 Arora的

1 个答案:

答案 0 :(得分:0)

我尝试了强制onInit重新运行的选项,以便在需要时安全地初始化,但遗憾的是它在收到输入变量之前运行,因此它没有初始化所需的内容。

退后一步,我想我在这里试图解决错误的问题。我相信我需要依靠angular的标准方式通过输入参数传递数据并利用ngOnChanges重新初始化基于的子组件新的输入变量。

我遇到的真正陷阱是当我说“onChanges在子组件中反复运行”时所提到的...它是什么让我失望并在此详细说明并附带变通方法:https://github.com/angular/angular/issues/7782

因此在组件加载时,一次性序列是:1)运行onChanges(输入变量为空)2)运行onInit 3)运行onChanges(输入变量是最新的)。

随后,当输入变量发生变化时,序列只是运行onChanges,所以如果你可以忽略第1步中的第一个空参数,那就没什么大不了的了。

然而,onChanges不仅在加载子组件时运行两次,而且如果您将子组件交替显示在我的场景中,它会重复所描述的1-2-3序列,用户可以在加载编辑/视图之间切换他们在数据表中选择的给定数据行的子组件。

要启动,在步骤#1中,我注意到在运行onChanges时,angular将传递过时的输入参数,然后在步骤#3上传递最新的输入参数。

如果您的子组件具有幂等初始化代码,您可能永远不会注意到这一切,但在我的情况下,步骤#1和#3快速连续触发并触发非幂等的Observable订阅...(调试不好玩! )。

除非/直到角度设计缺陷得到解决,否则我认为这个陷阱仍将存在。希望这会有所帮助...