在Angular组件中放置JavaScript侦听功能的最佳位置是什么？

Question

TL; DR：

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

this.human = new HumanAPI(iFrameSrc);

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

更长的版本：

我正在使用BioDigital HumanAPI开发一个Angular应用程序。这里的基本思想是HumanAPI提供了几个解剖模型，可以使用iFrame（示例here）在Web应用程序中呈现。此src的{​​{1}}是一个链接，例如：

iFrame

由于我希望我的Angular应用程序的用户能够查看其中的几个模型，因此我列出了这些网址，并根据用户的选择更新了https://human.biodigital.com/widget?m=congestive_heart_failure src ，使用具有以下代码的函数iFrame：

updateFrameSrc

最后（问题即将来临，请与我保持联系），为了操纵和注册不同的点击事件和用户与iframeSrc: SafeUrl; this.iframeSrc = this.sanitizer.bypassSecurityTrustResourceUrl(newUrl); 本身内的模型的互动，我们制作了一个HumanAPI对象：

iFrame

这使我们可以使用像this.human = new HumanAPI(iFrameID); 这样的API事件监听器函数来注册和保存点击事件（如上面引用的示例所示）。所有这一切都很好。

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

我当前的解决方法是在更新human.on来源后重新调用iFrame函数，它的工作原理是这样，但我相信这是违反标准的生命周期管理实践。

我的问题是：

• 可以从组件逻辑中重新调用ngOnInit()函数吗？
• 如果没有，我应该在哪里放置一个JavaScript API函数，即使在iFrame的来源发生变化之后，也始终会监听来自ngOnInit()的点击事件？

Answer 1

如果您正在寻找近实时，您会希望在NgOnChanges生命周期钩子中发生这种情况。请注意，这是昂贵的。

如果稍微接近“接近实时”是可以接受的，我会建议在组件初始化NgOnInit时连接快速延迟主题Observable.Interval(500)（但也要稍微便宜）。

请不要通过重新调用ngOnInit来绕过钩子。

如果您有其他问题，请与我们联系。

Answer 2

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

在更新HumanAPI来源时，不要忘记重新初始化该功能中的iFrame ngOnInit()对象。

应该避免重新调用trim()，因为它绕过了生命周期钩子的可接受功能，如@iHazCode所述。