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

Question

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

谢谢

Answer 1

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

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

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

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

Answer 2

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

通常，当使用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将覆盖前一个，如果它是从与段右侧相关的组件调用的第二个:storeId（first => second从左到右）。

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