Angular 5 перезагрузить данные для всех подкомпонентов после обновления

Question

У меня есть компонент PersonTabsComponent , который расширяет абстрактный компонент PersonParentComponent (содержит модель человека), где я использую некоторую информацию из модели. Внутри этого компонента я также определил другие компоненты для адреса и другой информации, которые также расширяют тот же PersonParentComponent .

То, что я хочу сделать, это после обновления модели персонажа, перенаправляющей на тот же маршрут, и просмотра изменений во всех компонентах. Данные вводятся во все компоненты с использованием резольвера PersonResolver и activRoute .

export abstract class PersonParentComponent {

  person: Person= new ..();
  personRegister: Person= new ..();;

  protected constructor(private activatedRoute: ActivatedRoute,
                        private translate: TranslateService) {
    this.activatedRoute.data.subscribe(data => {
      const persons = data['person'];
      this.person = persons[0];
      this.personRegister = persons[1];
    });
  }
...
}

Чтобы иметь возможность перенаправить на тот же маршрут и заставить распознаватель вызывать данные, для которых я определил маршрут следующим образом ( runGuardsAndResolvers: 'always' ):

      {
    path: 'personen/:personId',
    component: PersonTabsComponent,
    resolve: {person: PersonVeResolver},
    runGuardsAndResolvers: 'always'
  }

    @NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

Чем после выполнения обновления я перенаправляю на тот же маршрут, используя:

this.router.onSameUrlNavigation = 'reload';
this.router.navigate(['personen/'.concat(String(id))]);

Проблема, с которой я столкнулся, заключается в том, что данные обновляются только в компоненте PersonTabsComponent , а также в подкомпонентах, содержащихся внутри него, даже если выполняется метод разрешения для распознавателя.

Знаете ли вы, что я что-то упустил или как заставить подкомпоненты также перезагрузить данные?

PS: я не хочу делать противное решение window.location.reload (). :)

Спасибо!

Answer 1

Я предлагаю вам внедрить фреймворк Redux link для управления состоянием.

это хороший подход для управления состоянием приложения. это единое неизменное хранилище данных. Односторонний поток данных. Подход к изменениям, основанный на чистых функциях и потоке действий.

Answer 2

У меня было похожее поведение с моими компонентами, и причина была в том, как я загружал данные в дочерние компоненты. Если вы загрузите свои данные в одну из ловушек жизненного цикла компонента (например, ngOnInit), ваши дочерние компоненты не будут перезагружать свои данные при переходе по тому же маршруту, потому что они уже загружены на вашей странице.

После осознания этого я начал следовать подходу «Поток данных», который был описан в этом посте: https://bulldogjob.com/articles/539-scalable-angular-application-architecture,, где у вас есть один верхний компонент, который загружает все необходимые данные, и эти данные передаются в дочерние компоненты через @Inputs. Создав мои компоненты таким образом, я решил свои проблемы.

В качестве обходного пути вы также можете создать новый компонент для работы в качестве перенаправителя. Таким образом, вы создаете новый маршрут, который загружает этот новый компонент, и в нем вы перенаправляете браузер на нужный вам маршрут. Сделав это, вы снова загрузите каждый компонент (основной и его дочерние элементы), не делая window.location.reload (). Недостаток этого подхода заключается в том, что он будет портить историю навигации (т. Е. Сломать кнопку возврата), и вам придется исправить это вручную.