Angular

Question

基本上，我有两个组件 page1 和 page2，我想在第二页。但是，当切换到 page2 时，什么也没有呈现。

根据我的理解，您必须在 index.html 文件的 <head> 元素内加载 google 图表，但是因为容器应该在我的组件中渲染图表 page2 在开头隐藏，google 图表找不到渲染它。

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

时消失

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

Answer 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 挂钩中，它应该可以正常工作。当然，将 document.getElementById("chart_div") 替换为 Angular 获取容器引用的方式是首选（即 ViewChild）。

更新了 stackblitz，其中包含最低限度的工作准系统示例：https://stackblitz.com/edit/angular-button-routerlink-6vzuyd

Angular - 在不同页面上呈现 Google 图表