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

Question

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

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

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

的所需数据

我是这样通过link传递状态下的资源的。就像我说的，点击 link 效果很好。

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

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

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

Answer 1

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

Answer 2

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

使用 ReplaySubject 和 1 的 bufferSize 将向新订阅者重播 last/current 值。这对你的情况应该足够了。

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

Angular how to pass data to nested route component

angular-ui-router

angular