时间戳

首页 > 解决方案 > 如何从 Angular 8 组件中的 index.html 获取输入或访问元素？

java - 如何从 Angular 8 组件中的 index.html 获取输入或访问元素？

问题描述

我是 Angular 技术的新手，并尝试使用以下代码在我的 java servlet Web 应用程序中嵌入一个 Angular 图表组件。

<iframe src="../angularchart/index.html" name="targetframe" allowTransparency="true" scrolling="yes" frameborder="0" width="100%" height="80%"></iframe>

这在我的网页中为我带来了所需的 Angular 图表，但我想从我的 java servlet 将数据传递给 Angular 组件。我知道标准方法是使用 REST api，但就我而言，我的 servlet 中只有数据，并且可以将其传递给 index.html 页面。类似于下面的内容，

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angularchart</title>
  <script type="text/javascript">
    function chartInput()
    {
      var jsoninput = { key : value}  // dummy input populated by servlet
      return jsoninput
    }
  </script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <app-root></app-root>
</body>
</html>

我的问题是我可以从我的 Angular 组件访问函数/元素定义的 index.html 吗？还是有其他方法可以做？提前致谢。如果您发现问题中有任何问题，请原谅。

标签： javaangularservlets

解决方案

选项 1： 使用 javascriptpostMessage 

// where to send messages with postMessage
 var target_origin = 'http://www.your-domain.com';
 var form = document.getElementById('myChart');

 // button onclick handlers
 // display offsetHeight of iframe containing this document
 form.elements.button1.onclick = function() {
      parent.postMessage( {'chartClick': 'testMessage'}, target_origin );
 }

选项 2 您还可以在 localstorage 中设置数据并从您的 servlet 代码中获取该数据

我希望它可以帮助你

推荐阅读