Angular - 在不同的页面上渲染谷歌图表答案

【问题标题】：Angular - Render Google chart on a different pageAngular - 在不同的页面上渲染谷歌图表
【发布时间】：2021-03-02 11:43:12
【问题描述】：

基本上，我有两个组件 page1 和 page2，我想在第二页上绘制一个谷歌甘特图。但是，当切换到 page2 时，不会呈现任何内容。

据我了解，您必须在 index.html 文件的 <head> 元素中加载谷歌图表，但是因为应该在我的组件 page2 中呈现图表的容器> 一开始是隐藏的，google chart 找不到渲染它。

我已经尝试将谷歌图表脚本移动到 page2 的 html 文件中，但仍然没有结果。
使 page1 容器可以工作，但是一旦我切换页面，它就会在切换回 page1 时消失。

有没有办法解决这个问题？谢谢！

【问题讨论】：

【解决方案1】：

如果您不确定如何正确执行它，您可以随时寻找一些充当包装器的 npm 库 - 即angular-google-charts。注意 - 我没有测试库以及它是否/如何工作。

您也可以自己进行更改。

请注意，您没有将所有脚本都放在头部 - 重要的部分是引用 google 加载程序：

<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>

然后，您可以在应用程序的任何位置使用从文件中导入的全局函数/变量。但是，由于 Angular 使用 TypeScript，它会警告您未定义“google”对象。要解决它，您可以简单地声明一个空的 const - 它将在运行时被从 google 托管导入的脚本替换：

declare const google;

然后您可以简单地将所需的脚本放在组件的OnInit 挂钩中，它应该可以正常工作。当然，用 Angular 获取容器引用的方式替换 document.getElementById("chart_div") 是首选（即ViewChild）。

【讨论】：