Архитектурный поток Angular 2 app

Я работаю над приложением Angular2. Мое приложение используется либо для создания нового сообщения, либо для редактирования уже созданного сообщения. Он имеет две страницы.

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

Мой вопрос: Как я должен архитектировать поток приложения, чтобы он соответствовал сценариям создания и редактирования.




То, о чем я думаю сейчас, это,

Каждый компонент имеет службу (сделать их вводимыми), которая будет содержать данные, и я должен создать наблюдателей для всех этих служб и подписаться на те, в других компонентах, чтобы они действовали в зависимости от изменений в службе.

Другой путь:

Я создал общий сервис эмиттера, который будет возвращать объекты emit, я могу вызвать этот компонент и выдать событие, которое другие компоненты слушают.

Какой способ был бы хорошим способом справиться с такого рода сценариями и помочь в долгосрочной перспективе? Кроме того, должен ли помочь таким образом, чтобы я мог позже легко добавить еще несколько компонентов?

Спасибо

1 ответ

  1. Я хотел бы рассмотреть возможность создания объектов’ model’, которые вам нужны в методе ngOnInit второй страницы, и передать их в качестве входных данных компонентам, которые в них нуждаются.

    Это требует, чтобы компоненты определяли свойства @Input () для получения таких объектов ‘model’.

    Я надеюсь, что это поможет

    В ОТВЕТ НА КОММЕНТАРИЙ ANUTEJA

    Я бы рассмотрел следующую стратегию:

    1) Child1определяет выходное свойство (скажем @Output() resultOutput), через которое он сигнализирует о том, что новые результаты были извлечены из внутреннего вызова, т. е. что — то вроде this.resultOutput.emit(resultOfBackendCall)(предполагая, что resultOfBackendCallэто переменная, определенная в методеChild1, который извлекает данные)

    2) Parentкомпонент подписывается на resultOutputсвойство Child1и поэтому знает, когда новый результат извлекается, через что-то вроде <child1 (resultOutput)="newResult($event)"></child1>

    3) newResult(event)метод Parentсохраняет результат, полученный от Child1в свойство Parent(назовем переменнуюresultReceived), что-то вроде

    newResult(resultFromBackEnd) {
      this.resultReceived = resultFromBackEnd;
    }
    

    4) Child2определяет свойство ввода (скажем@Input() myList), где он ожидает получить из Parentсписка, который должен быть отображен

    5) ParentканалыChild2, используя свойство resultReceivedчерез что-то вроде <child2 [myList]="resultReceived"></child2>

    Если все работает, как только Parentполучает уведомление от Child1нового результата от бэкэнд вызова его каналы Child2и результат должен быть diplayed.

    В основном это означает, что Parentцентрализует все уведомления и отправляет данные своим потомкам в соответствии с правилами применения. Таким образом, на мой взгляд, вы получите четкий дизайн с Parentоркестровкой того, что происходит в этой конкретной части приложения.

    Я надеюсь, что это достаточно ясно, и что это помогает