Angular 通过服务将参数传递给ngOnInit

我刚刚开始学习angular 2，我有一些问题，我认为这个场景是否可行

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

• Microservice 1和ng应用程序1-用于处理 使用者
• 服务2和ng应用程序2-用于计算用户的所有适用税费

如果我登陆app 1，输入交易的详细信息，然后单击“继续”按钮，我应该能够传递“所有”税务计算所需的值以及用户Id

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

---

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

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

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

微型前端（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;
}

这是一个叫本杰明·约翰逊的家伙的媒体，你可能想读一读，了解更多

---

也就是说，由于这些都是DOM事件，因此仍有人可以以某种方式拦截它们。在这些情况下，您可以实现一个定制的微服务，该服务可以返回特定的敏感信息，然后执行所需的操作。

我也使用了相同的体系结构。我所做的是，我使用RxJS创建了自己的dispatcher实用程序，它使用纯Javascript（可重用API），因为任何方式都依赖于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);

发送消息

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

  RxDispatcher().getDispatcher("onSendMessage")
         .subscribe((message) => {
           console.log(message) //Output : Hi
        });

订阅消息

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

  RxDispatcher().getDispatcher("onSendMessage")
         .subscribe((message) => {
           console.log(message) //Output : Hi
        });

---

你所说的ng-app1和ng-app2是什么意思？这两个都是并列的两个角度应用程序还是组件？@NinjaJami这意味着两个角度应用程序，与每个微服务相关联的微用户界面。我添加了一个答案，这对您也有帮助。我建议将您的问题标题改为“如何在两个微前端应用程序之间通信”。这会让你的问题更深入，完全明白。谢谢你的解释。但是，就像我的案例1）在应用程序1中进行交易，2）移动到应用程序2并计算税费3）返回到第一个应用程序并扣除税费并继续交易。所有这些都是自定义事件吗？导航到应用程序2后，我如何在应用程序1中保留信息？@Poppy，我猜信息不会在应用程序1中保留，而是在应用程序1使用的微服务中保留。App1将有一个独特的id，借助它可以从微服务获取所有相关细节。是的。。有道理：）非常感谢：）