如何将 id 参数传递给子路由？

Question

我有以下路由配置，在此示例中，我可以使用路由函数在 StudentComponent 中获取 id 参数。

但是，我需要将此 id 参数传递给此组件的子路由，但我不确定是否必须更新以下配置以将此 id 参数传递给 EducationComponent.

我是否也应该在 StudentComponent 和 EducationComponent 中使用相同的方法？

{
  path: 'student/:id',
  component: StudentComponent,
  children: [
    {
      path: '',
      redirectTo: 'education',
    },
    {
      path: 'education',
      component: EducationComponent      
    }
  ]
}

Answer 1

您有多种选择，最佳选择取决于您的应用程序架构。

根据您的 app-routing.module.ts 文件的配置方式，公开 id 参数变量的路由是您显示的两个子路由的父路由。所以你有某种父子关系。您也可以将其视为组件对组件的关系（或一对多关系），即使您的路由策略表明您可能不想那样做。

与其他父子组件关系一样，您可以使用 @Input 装饰器和输入值来执行类似以下的操作，以将 ParentComponent 维护或已知的值传递给子组件。 ParentComponent 将从路由器快照或使用其他策略（如 ActivatedRoute params.

）访问此参数

<app-parent-component>
  <app-child-component [id]="variableNameInChildComponent"></app-child-component>
</app-parent-component>

（见https://angular.io/guide/component-interaction）

或者，您可以为检索、更新等时的 id 值创建一个数据存储。

当组件具有某种一对多关系时，以其他组件可能访问的方式存储数据可能更合适。对于 id，这意味着 StudentComponent 树之外的其他组件也利用该值。通过这种方式，您可以将服务代码注入许多组件并在整个应用程序中使用这些值，具体取决于模块模式，这在路由策略片段中并不清楚。

您的 id 或您存储的任何内容的此数据存储位置取决于该值在您的应用程序中的普遍存在程度。如果在整个应用程序中使用学生的 ID，那么带有 (Behavior)Subject 的服务文件听起来不错。如果学生 ID 用于子组件，您可以通过服务中 app-parent-component 的获取请求以更严格的方式处理值状态。

如何将 id 参数传递给子路由？

How to pass id parameter to child route?

javascript

router

typescript

angular