如何解决Angular - 在不同页面上呈现 Google 图表
基本上，我有两个组件page1 和page2，我想在第二页上绘制谷歌甘特图。 但是，当切换到 page2 时，不会呈现任何内容。
据我所知，您必须在 index.html 文件的 <head> 元素中加载谷歌图表，但因为应该在我的组件 page2 一开始是隐藏的，谷歌图表找不到渲染它。
我尝试将谷歌图表脚本移动到 page2 的 html 文件，但仍然没有结果。
使 page1 容器工作，但一旦我切换页面，它就会在切换回 page1 时消失。
这是我的stackblitz代码：https://stackblitz.com/edit/angular-button-routerlink-xglnar?file=src/index.html
有没有办法解决这个问题？谢谢！
解决方法
如果您不确定如何正确执行，您可以随时寻找一些充当包装器的 npm 库 - 即 angular-google-charts。注意 - 我没有测试库以及它是否/如何工作。
您也可以自己进行更改。
请注意，您没有将所有脚本都放在头部 - 重要的部分是引用 google 加载器：
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
然后您可以在应用程序的任何位置使用从文件导入的全局函数/变量。但是，由于 Angular 使用 TypeScript，它会警告您未定义 'google' 对象。要解决这个问题，您可以简单地声明一个空的 const - 它将在运行时被从谷歌托管导入的脚本替换：
declare const google;
然后您可以简单地将所需的脚本放在组件的 OnInit 挂钩中，它应该可以正常工作。当然，通过 Angular 获取容器引用的方式替换 document.getElementById("chart_div") 是首选（即 ViewChild）。
更新了 stackblitz 与工作准系统最低示例：https://stackblitz.com/edit/angular-button-routerlink-6vzuyd
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。