0

TL;博士：

我在 Angular 5 应用程序中渲染一个BioDigital HumanAPIiFrame解剖模型。我使用以下方法实例化 API 对象：

this.human = new HumanAPI(iFrameSrc);

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

更长的版本：

我正在使用 BioDigital HumanAPI 开发一个 Angular 应用程序。这里的基本思想是 HumanAPI 提供了几个解剖模型，这些模型可以使用（此处iFrame的示例）在 Web 应用程序中呈现。这是一个链接，类似于：srciFrame

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

由于我希望我的 Angular 应用程序的用户能够查看几个这样的模型，我有一个这些 URL 的列表，并且根据用户的选择，我使用具有以下代码的函数更新srcof ：iFrameupdateFrameSrc

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.oniFrame

My current work-around is to re-call the ngOnInit() function after updating the iFrame source, and it works that way, but I believe this is against the standard life-cycle management practices.

My questions are:

  • It is acceptable to re-call the ngOnInit() function from within the component logic?
  • If not, where should I place a JavaScript API function that listens to click events from an iFrame at all times, even after the source of that iFrame has been changed?
4

2 回答 2

1

If you are looking for near real time you will want this to occur in the NgOnChanges life-cycle hook. Be advised this is expensive.

If slightly less "near real time" is acceptable, I would advise wiring up a rapid delay subject Observable.Interval(500) (also, but slightly less expensive) at the time of Component initialization NgOnInit.

Please DO NOT circumvent the hooks by re-calling ngOnInit.

If you have additional questions let me know.

于 2018-01-30T05:10:36.200 回答
1

As suggested in an earlier comment, you can just move the code in ngOnInit() to a separate function and call that function from both ngOnInit() as well as your update function.

Don't forget to re-initialize the human object of HumanAPI in that function as well, when updating the iFrame source.

Re-calling ngOnInit() should be avoided as it circumvents the acceptable functionality of lifecycle hooks, as mentioned by @iHazCode.

于 2018-01-30T14:14:08.507 回答