Question

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

但是，我需要将此 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 维护或已知的值传递给 ChildComponent . 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，那么带有（行为）主题的服务文件听起来不错。如果将学生 ID 用于子组件，您可以使用来自服务内的 app-parent-component 的 get 请求以更严格的方式处理值状态。

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

1 个答案: