Angular 6-从外部js文件中调用Angular函数

Question

最近我正在用Angular 6重写一个计划JS应用。

旧的东西是这样的：

在iframe中的文件js调用了定义到main.js文件中的“ parent.update_track（）”函数，并进入了iframe容器。

当应用在生产环境中运行时，这在Angular中不起作用，响应为：TypeError：parent.update_track不是函数。

那么我该如何从iFrame中包含的外部js文件中将此函数声明为组件中ts文件中声明的“ update_track（）”？

Answer 1

您可以使用帖子功能。

因此，在您的iframe中，您只需调用打开程序窗口（父窗口）即可发布消息，有关更多信息，您可以使用this reference

然后在angular应用程序（父应用程序）中，您可以使用以下侦听器：

@HostListener('window:message',['$event'])
onMessage(e) {
  if (e.origin!="http://localhost:4200") {
     return false;
  }

  alert('here i am');
}

}

注意：您应该更改e.origin测试以支持本地环境和生产环境。