2

我刚开始学习 angular 2，我对我认为可能的情况有疑问。

我有一个微服务模型，其中我有与每个微服务相关联的角度应用程序。

  • 微服务 1 & ng app 1 - 用于处理用户的交易
  • 服务 2 和 ng app 2 - 为用户计算所有适用的税款

如果我登陆应用程序 1，输入我的交易详细信息并单击继续按钮，我应该能够将税收计算所需的值与用户 ID 一起传递“全部”？

通过 URL 传递它应该可以工作，但我有用户 ID、事务 ID、交易金额等以确保安全。

我是否能够通过 ngOnInit() 或通过某个生命周期事件传递它，以便 ng app 2 获取这些详细信息，并根据传递的 init 参数加载带有税值的页面？帮我解决这个问题：）

4

2 回答 2

1

好吧，您似乎拥有的是微前端。就像每个微服务都是为一个非常具体的实体设计的一样，每个微前端都是为一个非常具体的实体设计的。这就是你似乎拥有的。

在微前端之间共享数据的一种非常常见的方法是定义自定义事件。

微前端（A）可以发出这样的事件：

// this is attached to the button in micro-frontend A
btn.onclick = () => {
  const event = new Event("a__click");
  window.dispatchEvent(event);
};

另一个微前端（B）可以监听该事件并做出相应的反应：

// fire this when the micro-frontend initializes
window.addEventListener("a__click", () => this.onUpdateCount());

// actual method to update the count
onUpdateCount(amt = 1) {
  this.state.count += amt;
  const countEl = this.shadowRoot.getElementById("b__count");
  countEl.innerHTML = this.state.count;
}

这是一个名叫 Benjamin Johnson 的人在 Medium 上发表的一篇非常有启发性的文章，您可能想阅读以了解更多信息。

话虽如此，由于这些是 DOM 事件，因此仍然有人可以以某种方式拦截它们。在这些情况下，您可以实现一个自定义微服务，该微服务可以返回特定的敏感信息，然后执行必要的操作。

于 2018-11-20T17:29:08.043 回答
1

我还使用单水疗元框架研究了同一种架构。我所做的是我使用纯 Javascript（可重用 API）使用 RxJS 创建了自己的调度程序实用程序，因为任何方式 Angular 都依赖于 RxJS。所以我们可以利用它。

这是我实现的代码，您可以从任何微前端应用程序（Angular、React、Vue.js）发布和订阅。我在ts中写的代码。如果需要，您可以转换为 js。

import { Subject } from "rxjs";
(function (global: any) {
  var RxDispatcher: any = function () {
    return new RxDispatcher.instance();
  };
  RxDispatcher.prototype = {
    getDispatcher: function (dispatcherName: string): Subject<any> {
      if (global.subjects) {
        return global.subjects[dispatcherName]
          ? global.subjects[dispatcherName]
          : console.error(
            "Unable to find the dispatcher of " +
            dispatcherName +
            " .Please ensure the dispatchers are properly registered."
          );
      }
      console.error(
        "Unable to find the dispatcher of " +
        dispatcherName +
        " .Please ensure the dispatchers are properly registered."
      );
    },
    registerDispatchers: function (dispatchers: string[]) {

      if (dispatchers) {
        if (!global.subjects) {
          global.subjects = {};
        }
        dispatchers.forEach(dispatcher => {
          if (!global.subjects[dispatcher]) {
            global.subjects[dispatcher] = new Subject();
          }
        });
      }
    },
    dispatch: function (dispatcher: string, args?:any): void {
      if (!dispatcher) {
        console.error(
          "Unable to dispatch message to dispatcher of " + dispatcher
        );
      } else {
        var dispatcherInstance = this.getDispatcher(dispatcher);
        if (dispatcherInstance) dispatcherInstance.next(args);
      }
    },
    dispatchToMultiple: function (dispatchers: string[],args?:any) {
      if (!dispatchers) {
        console.error(
          "Unable to dispatch message to dispatcher of " + dispatchers
        );
      }
      dispatchers.forEach(subscriber => {
        var dispatcherInstance = this.getDispatcher(subscriber);
        if (dispatcherInstance) dispatcherInstance.next(args);
      });
    },
    clear: function () {
      delete global["subjects"];
    }
  };
  RxDispatcher.instance = function () { };
  RxDispatcher.instance.prototype = RxDispatcher.prototype;
  global.RxDispatcher = RxDispatcher;
})(window);

用法

如果您在打字稿中，则必须声明

声明 var RxDispatcher: any;

注册调度员

 var dispatchers=["onSendMessage"]
 RxDispatcher().registerDispatchers(dispatchers); //expecting an array.
 You can register multiple dispatchers at one time

发信息

 RxDispatcher().dispatch("onSendMessage", {
       message: "Hi"
    })

订阅消息

  RxDispatcher().getDispatcher("onSendMessage")
         .subscribe((message) => {
           console.log(message) //Output : Hi
        });
于 2018-11-21T15:32:18.730 回答