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

时间:2018-01-30 05:01:08

标签: javascript angular typescript ngoninit

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()的点击事件?

2 个答案:

答案 0 :(得分:1)

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

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

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

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

答案 1 :(得分:1)

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

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

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