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

【问题标题】：Call parent component function from child when child components are in router outlet Angular当子组件在路由器出口Angular中时，从子组件调用父组件函数
【发布时间】：2019-11-03 02:08:22
【问题描述】：

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

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

我该怎么做？

【问题讨论】：

看看这个stackoverflow.com/questions/35884451/…

标签： angular angular7

【解决方案1】：

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

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

确保您使用新的providedIn: 'root' 角度功能来确保服务只被实例化一次。（单例）

【讨论】：

【解决方案2】：

如果你有类似的想法

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

这是无效的，因为您认为子组件实际上是运行时的兄弟组件。

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

【讨论】：

我已经创建了一个共享服务，但是我怎样才能得到一个可观察的函数结果？私人消息源 = 新的 BehaviorSubject(); currentmessage = this.messagesource.asObservable();当前消息必须包含来自 httprequest 的结果
使用来自rxjs 的of。阅读here
iam 使用真实的后台应用，不返回虚假数据
哈哈，那边贴的答案不只是解决假数据。您是否尝试将 HTTP 响应从服务传递给父级？
你的更改信息需要这样changeMessage(r,u) { this.getStatusCount(r,u).subscribe(res => this.messageSource.next(res));}