Передача параметра в ngOnInit через сервис

Question

Я только начал изучать Angular 2, и у меня возникли вопросы о том, возможен ли сценарий, который я считаю возможным.

У меня есть модель микросервиса, где у меня есть угловые приложения, связанные с каждым микросервисом.

• Microservice 1 & ng app 1 - для обработки транзакций пользователя
• сервис 2 и приложение нг - это рассчитать все применимые налоги для пользователя

Если я попаду в приложение 1, введу детали своей транзакции и нажму кнопку "Продолжить", я смогу передать "Все" значения, необходимые для расчета налога, вместе с идентификатором пользователя?

Передача через URL должна работать, но у меня есть идентификатор пользователя, транзакции, сумма транзакции и т.д., чтобы быть немного безопасным.

Смогу ли я передать его через ngOnInit() или через какое-то событие жизненного цикла, чтобы приложение ng 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 от парня по имени Бенджамин Джонсон, которую вы можете прочитать, чтобы узнать больше об этом.

При этом, поскольку это DOM Events, кто-то еще может их как-то перехватить. В этих случаях вы могли бы внедрить пользовательский микросервис, который мог бы возвращать определенную конфиденциальную информацию, а затем делать с ней необходимую информацию.

Answer 2

Я также работал над такой же архитектурой, используя мета-фреймворк для одного спа. Я создал собственную диспетчерскую утилиту, используя простой Javascript(Reusable API) с использованием RxJS, потому что в любом случае Angular имеет зависимость от RxJS. Таким образом, мы можем воспользоваться этим.

Вот код, который я реализовал. Вы можете публиковать и подписываться из любых приложений для микро-интерфейса (Angular,React,Vue.js). Код, который я написал в тс. Вы можете конвертировать в 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: 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
        });