Передача параметра в ngOnInit через сервис - PullRequest
Новая
       43

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

0 голосов
/ 20 ноября 2018

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

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

  • Микросервис 1 и приложение 1 - для обработки транзакций пользователя
  • Сервис 2 и приложение 2 - для расчета всех применимых налогов для пользователя

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

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

Смогу ли я передать его через ngOnInit () или через какое-то событие жизненного цикла, чтобы приложение ng 2 получило эти данные, и страница загрузилась со значениями налога, основанными на переданных параметрах инициализации?Помоги мне в этом:)

Ответы [ 2 ]

0 голосов
/ 21 ноября 2018

Я также работал над такой же архитектурой, используя мета-фреймворк для одного спа .Я создал собственную диспетчерскую утилиту, используя простой 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: любой;

Зарегистрировать диспетчеров 

 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
        });
0 голосов
/ 20 ноября 2018

Ну, у тебя, похоже, есть Микрофронтендс.Точно так же, как каждый микросервис предназначен для очень конкретной сущности, каждый микро-интерфейс предназначен для очень конкретной сущности.И это то, что у вас, похоже, есть.

Очень распространенный подход к обмену данными между микро-интерфейсами заключается в определении пользовательских событий.

Микро-интерфейс (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, кто-то еще может их как-то перехватить.В этих случаях вы могли бы внедрить пользовательский микросервис, который мог бы возвращать определенную конфиденциальную информацию, а затем делать с ней необходимую информацию.

...