angular - 将外部数据传递给 Angular-CLI 应用程序

问题描述

我有一个从另一个外部页面启动的 Angular-CLI 应用程序（Angular 6）。所以起初index.html是被显示的。我可以index.html通过使用postMessage方法从外部页面异步发送数据。我的问题是如何将这些数据传递给我的 Angular 应用程序。我有两个问题：

第一个是main.ts立即启动，到那时我还没有收到用postMessage. 那么，我该如何推迟 main.ts呢？
第二件事是如何将数据发送到main.ts以及如何使其对我的应用程序可用？

索引.html

<body>
  <script>

    window.onload = function () {
      window.parent.postMessage("Loaded", "*");
    }

    window.addEventListener("message",
      function(event) {
        if (event.origin !== 'http://localhost:8080') {
          return;
        }
        console.log("Yes!!!", event.data);
      });

  </script>
  <app-root>Loading...</app-root>
</body>

main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

export function getBaseUrl() {
  return document.getElementsByTagName('base')[0].href;
}

const providers = [
  { provide: 'BASE_URL', useFactory: getBaseUrl, deps: [] }
];

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic(providers).bootstrapModule(AppModule)
  .catch(err => console.log(err));

标签： angular

angular - 将外部数据传递给 Angular-CLI 应用程序

问题描述

解决方案

推荐阅读