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

Question

我正在使用 Angular Router 并具有以下嵌套路由:

{
    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 的情况下工作？ ？我尝试在父组件和子组件共享的服务中订阅一个可观察对象，但传递给子组件订阅的函数没有被调用(可能是因为父组件在呈现子组件之前触发了可观察事件)。

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

Answer 1

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