时间戳

首页 > 解决方案 > 如何在父子路由之间共享查询参数？

angular - 如何在父子路由之间共享查询参数？

问题描述

我建立了一个网站，其中模板已被划分为组件。模板的页眉和页脚在main.component.html文件中，主体注入router-outlet。

唯一改变导航的部分是身体。页眉和页脚保持不变。共享 storeid 查询参数以动态构建正文。

我遇到的问题是当我必须从 main.component.ts 文件中获取 storeid 查询参数时。我不知道如何使用我当前的路线配置来做到这一点。

以下是路线配置：

const routes: Routes = [
  {
    path: '',
    component: HomeLayoutComponent, // HOME PAGE
    children: [
      { path: 'home', component: HomeComponent },
      { path: '', redirectTo: '/home', pathMatch: 'full' },
    ]
  },
    {
    path: '', // I TRIED ':storeid' here but negative
    component: MainLayoutComponent, // MAIN LAYOUT IS DIVIDED AS DESCRIBED IN QUESTION. THIS IS THE STOREID I HAVE TO FETCH FROM HERE
    children: [
      { path: 'event-details/:storeid', component: EventDetailsComponent }, // SO AS HERE TOO.
      { path: '', redirectTo: '/home', pathMatch: 'full' },
    ]
  },
  { path: 'error-404', component: Error404PageComponent },
  { path: 'error-500', component: Error500PageComponent },
  { path: '**', component: HomeComponent }
];

谢谢

标签： angularrouter

解决方案

大卫可能有点晚了，但我想我有办法解决你的问题。

通常，当使用在你的路由中传递的参数时，我们通过注入来访问这些参数ActivatedRoute，然后通过订阅暴露的paramsobservable 或通过使用直接从当前 url 获取参数snapshot.params。

export class {Your}Component implements OnInit {

  params
  constructor(private route: ActivatedRoute, ) { }

  ngOnInit() {
    this.route.params
      .pipe(first())
      .subscribe(x => {
        this.params = x
      });
     
    this.params =  this.route.snapshot.params
  }
}

这里棘手的部分（这是您要问的问题）是，通过进行这种类型的访问，我们只能获取当前路由段中传递的参数。

最简单的解决方案是使用不同的ParamsInheritanceStrategy。通过将继承策略设置为always，您将能够在附加到子段的组件中访问属于父路由段的参数。使用此策略时的棘手部分是，如果您有两个具有相同名称的参数，它们将覆盖，例如，如果您的路由是store/:storeId/route/:storeId/child第二个:storeId，如果它是从与第二个的段右侧相关的组件调用的，则会覆盖前一个:storeId（first => second从左到右 ）。

您可以在StackBlitz上查看一个工作示例

推荐阅读