Вызовите функцию родительского компонента из дочернего, когда дочерние компоненты находятся на выходе маршрутизатора Angular

Question

Мне нужно обновить некоторые данные в родительском компоненте, вызвав в нем функцию после того, как в дочернем компоненте произошло событие. Здесь мои дочерние компоненты находятся в роутере родительского

parentComponent.html: -

<div class="row">
     Parent component
</div>
<router-outlet></router-outlet>

Parentcomponent.ts: -

fetchRequestsStatus(role, user) {
if (this.userRole) {
  this.dashboardService.getStatusCount(role, user).subscribe(
    res => {
      console.log(res)
    },
    err => {
      console.log(err)
    })
}

}

Теперь при нажатии кнопки в дочернем элементе мне нужно вызвать функцию fetchRequestsStatus(role, user), передав параметр дочернего элемента. Я видел декораторы @input @ output для обмена данными, но здесь мой дочерний компонент находится внутри маршрутизатора.

Как я могу продолжить это?

Answer 1

Самым чистым решением было бы создать общую службу между родительским и дочерним компонентом, службу, которая содержит Subject, используемый родительским и дочерним компонентом.

Обратитесь к этому ответу для примера кода: https://stackoverflow.com/a/41989983/5620535

Убедитесь, что вы используете новую угловую функцию providedIn: 'root', чтобы убедиться, что служба запускается только один раз. (Singleton)

Answer 2

Если вы думаете что-то вроде

<router-outlet (onButtonClick)="fetchRequestsStatus($events)"></router-outlet>

, это недопустимо, так как дочерний компонент, который вы считаете дочерним, на самом деле является дочерним компонентом во время выполнения.

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