当子组件位于路由器出口 Angular 时，从子组件调用父组件函数

Question

在子组件中发生事件后，我需要通过调用父组件中的函数来更新父组件中的一些数据。这里我的子组件位于父组件的路由器出口中

parentComponent.html:-

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

父组件.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

如果你在想类似的事情

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

它是无效的，因为您认为是子组件的子组件实际上是运行时的同级组件。

我猜这是你的应用程序组件。因此，您可以在其中有一个主题，app.service它可以是子级的观察者，也可以是父级的可观察者。