javascript - 在 Angular 组件中放置 JavaScript 监听函数的最佳位置是什么？

Question

TL；博士:

我正在渲染 BioDigital HumanAPI我的 Angular 5 应用程序中的解剖模型 iFrame 。我使用以下方法实例化 API 对象:

this.human = new HumanAPI(iFrameSrc);

有一个API函数human.on(...)可用于注册 iFrame 内的点击事件(比如从模型中挑选对象等)。我需要这个功能来随时监听事件。我进行对象实例化并将此函数放在 ngOnInit() 中它有效，但是当我更改 iFrame 的来源时要渲染不同的模型，此函数将停止工作。我应该把这个监听函数放在哪里，以便它的逻辑始终可用？

更长的版本:

我正在使用 BioDigital HumanAPI 开发 Angular 应用程序。这里的基本思想是 HumanAPI 提供了几种解剖模型，可以使用 iFrame 在网络应用程序中呈现这些模型。 (例如 here )。 src这个iFrame是一个链接，类似于:

https://human.biodigital.com/widget?m=congestive_heart_failure

由于我希望 Angular 应用程序的用户能够查看多个此类模型，因此我有一个这些 URL 的列表，并根据用户的选择更新 src的iFrame ，使用函数 updateFrameSrc其中有以下代码:

iframeSrc: SafeUrl;
this.iframeSrc = this.sanitizer.bypassSecurityTrustResourceUrl(newUrl);

最后(问题来了，请留下来)，为了在 iFrame 内的模型中操作和注册不同的点击事件和用户交互。本身，我们创建一个 HumanAPI 对象，如下所示:

this.human = new HumanAPI(iFrameID);

这让我们可以使用 API 事件监听器函数，例如 human.on('scene.picked')注册并保存点击事件(如我上面引用的示例所示)。所有这些都运行良好。

问题是，自从我初始化 human ngOnInit() 中的对象函数，并把 human.on('scene.picked')函数那里，我无法注册 iFrame 之后的点击事件来源已更改。据我了解，ngOnInit()仅在组件首次初始化时调用一次，因此可能 human.on 的监听逻辑更新 iFrame 后不可用来源？我尝试过将逻辑放置在不同的生命周期 Hook 中，但它不起作用。

我当前的解决方法是重新调用 ngOnInit()更新iFrame后的功能源，它就是这样工作的，但我相信这违反了标准的生命周期管理实践。

我的问题是:

• 可以重新调用 ngOnInit()组件逻辑中的函数？
• 如果没有，我应该在哪里放置一个 JavaScript API 函数来监听 iFrame 中的点击事件任何时候，即使在 iFrame 的来源之后已更改？

Answer 1

正如之前评论中所建议的，您只需将 ngOnInit() 中的代码移动到单独的函数中，然后从 ngOnInit() 以及 ngOnInit() 中调用该函数即可您的更新功能。

更新 iFrame 源代码时，不要忘记在该函数中重新初始化 HumanAPI 的 human 对象。

应避免重新调用 ngOnInit()，因为它会绕过生命周期 Hook 的可接受功能，如@iHazCode所述。 .