在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在Web应用程序中进行渲染（ 此处为示例）。 此iFrame的src是一个链接，类似于：

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

因为我希望Angular应用程序的用户能够查看多个这样的模型，所以我有这些URL的列表，并根据用户的选择，使用具有以下代码的updateFrameSrc函数来更新iFrame的src ：

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

最后（问题来了，请留着我），为了在iFrame本身中操纵和注册不同的点击事件以及与模型的用户交互，我们制作了一个HumanAPI对象，如下所示：

this.human = new HumanAPI(iFrameID);

这使我们可以使用诸如human.on('scene.picked')类的API事件监听器函数来注册和保存点击事件（如我在上面引用的示例中所示）。 所有这些都工作正常。

问题在于，由于我在ngOnInit()函数中初始化了human对象，并且还在其中放置了human.on('scene.picked')函数，因此在更改iFrame源之后我无法注册click事件。 据我了解， ngOnInit()仅在组件首次初始化时被调用一次，所以在更新iFrame源之后， human.on的监听逻辑可能不可用吗？ 我尝试将逻辑放置在不同的生命周期挂钩中，但是它不起作用。

我当前的解决方法是在更新iFrame源之后重新调用ngOnInit()函数，这种方法可以正常工作，但是我认为这违反了标准生命周期管理惯例。

我的问题是：

• 是否可以从组件逻辑中调用ngOnInit()函数？
• 如果不是，即使在更改iFrame的来源之后，我仍应始终放置一个JavaScript API函数来监听iFrame点击事件吗？

Answer 1

如果您正在寻找近乎实时的记录，则希望在NgOnChanges生命周期挂钩中发生这种情况。 被告知这是昂贵的。

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

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

如果您还有其他问题，请告诉我。

Answer 2

如前面的注释中所建议，您可以将ngOnInit()的代码ngOnInit()单独的函数，然后从ngOnInit()和更新函数中调用该函数。

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

再呼叫ngOnInit()应避免，因为它绕过了生命周期钩的可接受的功能，如通过提及@iHazCode 。