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 @输出装饰器用于共享数据，但是我的子组件在路由器内部。

我该如何进行呢？

Answer 1

如果您正在考虑类似

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

这是无效的，因为您正在考虑的子组件实际上是运行时的同级组件。

我猜这是您的应用程序组件。因此，您可以在app.service中有一个主题，它可以是孩子的观察者，而对于父母则是可观察的。

Answer 2

最干净的解决方案是在父子组件之间创建共享服务，该服务包含父子组件使用的主题。

有关代码示例，请参见以下答案： https://stackoverflow.com/a/41989983/5620535

请确保使用新的providedIn: 'root'角度功能，以确保仅实例化该服务一次。（单身）

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

2 个答案: