Angular2，第三方回调初始化组件答案

【问题标题】：Angular2, Third Party Callback Initialize ComponentAngular2，第三方回调初始化组件
【发布时间】：2016-10-11 09:47:49
【问题描述】：

我的最终目标是使用 Angular2 构建一个谷歌地图组件。

谷歌地图有自己的库，可以使用<script>标签初始化，有或没有callbak。

http://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=initialize

我想用这个回调函数来初始化一个angular2组件或者调用一个angular2组件的函数。例如，

http://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=MapCompnent.initMap

由于是静态方法，所以对我来说似乎是不可能的。

我的另一种方法是像这样检查谷歌地图变量

get googleMapReady() {
  return window.google.maps;
}

并将其与*ngIf="googleMapReady" 一起使用。

在我尝试第二种方法之前，我想知道是否可以从窗口级回调中调用 Angular2 组件实例函数？

如果是这样，那么我在哪里可以找到这些示例？

【问题讨论】：

标签： angular

【解决方案1】：

Googleapis 在window 范围内查找该方法。为 window 分配一个方法并将其名称传递给 URL。

【讨论】：

感谢您的回答。为什么它是相关区域？我读了，但我不明白这个答案涉及区域stackoverflow.com/a/35297044/454252
您可以将 Angulars 区域成像为运行 Angular 的气泡。某些 API （如 addEventHandler、setTimeout、...）在被“气泡”调用时会被修改。 Angulars zone 对它们进行修补，以在每次它们发生时通知 Angular。这是 Angular 运行变更检测的时候。当您传递对window.xxx 的方法引用并从“气泡”外部调用它时，Angular 不会注意到这种情况何时发生并且不会运行更改检测。这会导致恼人的错误，您可以在调试器中或通过“console.log(xxx)”看到模型已更改，但视图未更新。
使用zone.run(...)，您可以让代码在“气泡”内运行，Angular 知道它何时必须运行更改检测。 Angulars 变更检测是一个非常聪明的概念并且非常高效，但在某些情况下，它需要一些“手动”支持才能完全高效地完成工作。