Angular - 页面刷新时谷歌图表渲染失败答案

【问题标题】：Angular - Google Chart rendering fails on page refreshAngular - 页面刷新时谷歌图表渲染失败
【发布时间】：2018-12-07 12:15:23
【问题描述】：

我正在使用谷歌图表在我的角度应用程序上呈现图表。这适用于第一次页面访问，但一旦我刷新页面。 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

控制台出错：

【问题讨论】：

我更新了你的 stackblitz。工作完美在 index.html 文件中做了一些更改。

标签： angular google-visualization

【解决方案1】：

我在这里更新了你的堆栈闪电战。

我在本地系统中安装了谷歌地图。我测试过，它工作正常。所以我将您的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 更新后完善你的 stackblitz https://stackblitz.com/edit/angular-mn7d6q

截图，

希望它能解决你的问题。

谢谢，

穆图库马尔

【讨论】：