Angular如何将数据传递给嵌套路由组件答案

【问题标题】：Angular how to pass data to nested route componentAngular如何将数据传递给嵌套路由组件
【发布时间】：2020-04-30 15:34:09
【问题描述】：

我正在使用 Angular 路由器并有以下嵌套路由：

{
    path: 'resource/:id',
    component: ResourceComponent,
    children: [
      {
        path: 'general',
        component: ResourceGeneralComponent
      },
      {
        path: 'background',
        component: ResourceBackgroundComponent
      }
    ]
}

ResourceComponent 从 REST-API 获取资源并包含一个 <router-outlet>，其中呈现了其他组件。子路由组件应显示提取数据的不同部分。当我点击相应的链接时，我可以使用history.state 将我的数据放入子组件中。但是，这在导航到 url/resource/1/general 时不起作用，因为 ResourceGeneralComponent 没有来自 ResourceComponent 的所需数据。

我通过这样的链接传递状态中的资源。就像我说的点击链接工作正常。

<a routerLink="general" [state]="{resource: resource}" routerLinkActive="active" class="nav-link">General</a>

如何在不使用history.state 的情况下将资源放入子组件中？我尝试订阅父组件和子组件共享的服务中的可观察对象，但传递给子组件订阅的函数没有被调用（可能是因为父组件在渲染子组件之前触发了可观察事件）。

如何正确地将数据传递给子组件？

【问题讨论】：

标签： angular angular-ui-router

【解决方案1】：

我会考虑使用带有 Subject 或 BehaviourSubject 的属性包服务作为属性。我经历过类似的道路，我所做的是创建了一个包含一些属性的服务。我将属性创建为 BehaviourSubject，以便我可以订阅它并在发生任何更改时收到通知。

【讨论】：

听起来不错，但是我如何解决资源首先在主组件中获取的问题，因此子组件没有呈现，因此在设置资源时无法收到通知？我是延迟发送主组件中的更新还是什么？
如果你使用 observables 和 Subject 你可以解决这个问题。并且从孩子那里订阅这个属性。

【解决方案2】：

使用ReplaySubject，这将在新订阅者首次订阅时重播任意数量的旧值。

使用ReplaySubject 和bufferSize 的1 将向新订阅者重播最后/当前值。在你的情况下应该足够了。

【讨论】：