如何使用数据从另一个网站重定向到 Angular 应用程序？答案

【问题标题】：How to redirect to angular app from another website with data?如何使用数据从另一个网站重定向到 Angular 应用程序？
【发布时间】：2020-09-30 14:31:56
【问题描述】：

我有一个 WordPress 应用程序，现在我想将用户从这个 WordPress 应用程序发送到我的 Angular 应用程序，其中包含一些数据，

出于美观原因，我不能使用查询字符串传递数据。

【问题讨论】：

您可以将数据存储在 Worpress 数据库中的某个表中并从 Angular 读取。另一种方法是创建一个 index.html（使用 php）并在 <script> 中添加您需要的 angular 变量。在 Angular 中使用“declare”来允许编译应用程序

标签： angular typescript frontend

【解决方案1】：

我最终做了this，

创建一个角度路由并让组件监听窗口消息，并在收到消息组件时将其保存到 localStorage。

ngOnInit(){
    window.onmessage = function(e) {
      if( !e.data || e.origin !== "http://theWordpressSite" ) return;
      var payload = JSON.parse(e.data);
      localStorage.setItem(payload.key, JSON.stringify(payload.data));
    };
  }

然后在另一个站点中使用隐藏的 iframe 来打开这个角度路由，现在我们可以将消息传递给这个角度组件

<button onclick="sendDataTo()">CLICK ME</button>
<iframe id="sendMessageToThis" style="display: none;" src="http://angularWebsite.com/localStorageUtility"
   frameborder="0"></iframe>
<script>
   var sendDataTo = function () {
       var win = document.getElementById('sendMessageToThis').contentWindow;
       var obj = {
           name: "Jack"
       };
       win.postMessage(JSON.stringify({ key: 'storage', data: obj }), "*");
   };
   
</script>

【讨论】：