angular - 当子组件位于路由器导出 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中有一个主题它可以是子级的观察者，也可以是父级的可观察者。