通过服务将参数传递给 ngOnInit

Question

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

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

微服务 1 & ng 应用程序 1 - 用于处理用户
服务 2 和 ng 应用程序 2 - 为用户计算所有适用的税费

如果我登陆应用程序 1，输入我的交易详细信息并单击继续按钮，我应该能够传递 "All" 税务计算所需的值以及用户 ID？

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

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

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

这是一位名叫本杰明·约翰逊的人在 Medium 上发布的 amazingly enlightening article，您可能想阅读以了解更多信息。

也就是说，由于这些是 DOM 事件，有人仍然可以以某种方式拦截它们。在这些情况下，您可以实施一个自定义微服务，该服务可以 return 特定的敏感信息，然后用它做必要的事情。

Answer 2

我也曾使用 single-spa meta framework 研究过相同类型的架构。我所做的是我使用 RxJS 使用普通 Javascript(Reusable 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);

用法

如果你在 typescript 中，你必须声明

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

通过服务将参数传递给 ngOnInit

Passing param to ngOnInit through service

microservices

angular

micro-frontend