Question

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

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

微服务1和ng应用1-用于处理用户
服务2和ng应用2-用于计算用户的所有适用税金

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

通过URL传递应该可以，但是我有用户ID，transactionID，交易金额等，以确保安全。

我是否可以通过ngOnInit（）或某些生命周期事件传递它，以便ng app 2获取这些详细信息，并根据传递的init参数将页面的税额加载到页面上？帮助我：）

Answer 1

好吧，您似乎拥有的是Microfrontends。就像每个微服务都是为特定实体设计的，每个微前端都是为特定实体设计的。这就是您似乎拥有的。

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

微型前端（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》上的amazingly enlightening article，您可能需要阅读以了解更多信息。

话虽这么说，因为这些是DOM事件，所以仍然可以以某种方式拦截它们。在这种情况下，您可以实现一个自定义微服务，该微服务可以返回特定的敏感信息，然后对此进行处理。

Answer 2

我还曾使用single-spa meta framework从事相同类型的架构。我所做的是我使用RxJS使用纯Javascript（可重用API）创建了自己的调度程序实用程序，因为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：任何;

注册调度员

 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
        });

通过服务将参数传递给ngOnInit

2 个答案: