如何在父路由和子路由之间共享查询参数?

问题描述 投票:0回答:1

我建立了一个网站,其中模板已划分为组件。模板的页眉和页脚在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 }
];

谢谢

angular router
1个回答
0
投票

如果要将数据从父组件传递到子组件,则需要使用两件事:@Input和属性绑定。

如果要将数据从子组件传递回父组件,可以使用@Output和EventEmitter事件绑定

请参阅以下网址,因为我已回答相关问题。 Angular 6 Communicating between Parent&Child components using @Output

希望这对以正确的方式解决您的问题很有用。


0
投票

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

通常,当使用params时,通过你的路线,我们通过注入ActivatedRoute来访问这些参数,然后通过订阅暴露的params可观察量或通过使用snapshot.params直接从当前url获取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,您将能够访问附加到子段的组件中属于父路由段的params。使用这种策略时棘手的部分是,如果你有两个具有相同名称的参数,它们将覆盖,例如,如果你的路线是store/:storeId/route/:storeId/child,那么第二个:storeId将覆盖前一个,如果它是从与段右侧相关的组件调用的第二个:storeIdfirst => second从左到右)。

你可以在StackBlitz查看一个有效的例子

© www.soinside.com 2019 - 2024. All rights reserved.