时间戳

首页 > 解决方案 > 当子组件在路由器出口Angular中时，从子组件调用父组件函数

angular - 当子组件在路由器出口Angular中时，从子组件调用父组件函数

问题描述

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

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 装饰器用于共享数据，但这里我的子组件位于路由器内部。

我该如何进行呢？

标签： angularangular7

解决方案

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

请参阅此答案以获取代码示例： https ://stackoverflow.com/a/41989983/5620535

确保使用新的providedIn: 'root'角度特性来确保服务只实例化一次。（单件）

推荐阅读