Question

我正在使用Google图表在我的角度应用程序上呈现图表。第一次访问页面时效果很好，但刷新页面后即可。诸如googleLoaded和和google之类的变量未定义。

我使用了https://github.com/vimalavinisha/angular2-google-chart/中的指令代码

index.html

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>  
    var googleLoaded = false;
    var googleChartsPackagesToLoad = ['geochart'];
</script>

这是stackblitz网址： https://stackblitz.com/edit/angular-3av4p7

控制台错误：

Answer 1

在这里，我向您介绍了您的突击步枪。

我已安装我的本地系统google map，测试工作正常。因此，iam将您的angular2-google-chart.directive.ts文件替换为当前安装的文件。

而且您在index.html标签的<head></head>文件中的脚本初始化不正确。这就是问题所在。请在您的html文件中执行以下相同操作。

index.html文件

<html>
<head>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>  
    // !important: You want to give this variable(var googleLoaded = false;). This is used to run multiple chart in your jade.
    var googleLoaded = false;
    // !important: Define which chart packages to preload.Because this package uses ChartWrappers you can use any chart type that Google supports, but if it // isn't loaded it will load it on demand. 
    var googleChartsPackagesToLoad = ['geochart'];
</script>
</head>
<<body>
  <my-app>loading</my-app>
</body>
</html>

在更新IAM之后完善您的堆叠闪电战 https://stackblitz.com/edit/angular-mn7d6q

屏幕截图

我希望它能解决您的问题。

谢谢

Muthukumar

Angular-页面刷新时Google Map呈现失败

1 个答案: