Question

我正在使用@ngrx路由器，其中一条路由有一些子路由器（基本上是传递路由参数），如下所示：

{
path: '/browse',
component: BrowseComponent,
children: [
  {
    path: ':category',
    component: CategoryComponent
  }
]
}

category参数的值可以是＆＃34; 免费＆＃34;，＆＃34; 顶部＆＃34;，＆＃34; 付费＆＃34;，使用导航栏进行路由。

但我想添加另一个名为＆＃34; 所有＆＃34;的类别值要添加到导航栏，当应用导航到＆＃34; / browse ＆＃34;时，该导航栏应该是默认值在这种情况下（我认为）我需要将一些数据（实际上是一个对象）传递给子路径（即＆＃34; / browse / all ＆＃ 34）。在子路由（本质上是子路由的组件）需要调用服务时需要此数据。

我尝试使用index路线，将CategoryComponent设为＆{34; /浏览＆＃34; index。如下

{
path: '/browse',
component: BrowseComponent,
index: {
  component: CategoryComponent
},
children: [
  {
    path: ':path',
    component: CategoryComponent
  }
]
}

但我仍然不确定如何将数据从BrowseComponent传递到CategoryComponent。有关如何将数据从父路由组件传递到子路由组件的任何想法？或者我做错了，可以使用其他更好的方法在子路径中添加所有类别。感谢

Answer 1

首先，当您使用ngrx时，您需要将您的商店视为“单一事实来源”。这意味着每次获取数据时，都应该从商店中检索它。

当您在应用程序中使用数据时，这是正确的。

但是，如果您的数据来自外部，请说，querystring，那么您应该将其保存到存储（通过调度操作）另一个组件应该从商店中获取这些数据。

你可以通过以下方式实现：https://angular.io/docs/ts/latest/cookbook/component-communication.html

这并不意味着你不能使用这些数据绑定方式只考虑你有一个存储所有数据的存储。

在你的情况下

  constructor(private store: Store<fromRoot.State>, route: ActivatedRoute) {
    this.actionsSubscription = route.params
      .select<string>('path')
      .map(path => new action.SomeAction(path))
      .subscribe(store);
  }

我希望它有用。

Answer 2

来自Victor Savkin的博文http://victorsavkin.com/post/145672529346/angular-router

class TeamCmp {
  id: Observable<string>;
  constructor(r: ActivatedRoute) {
    //r.params is an observable
    this.id = r.params.map(r => r.id);
  }

如何将数据从父路由传递到ngrx Angular2中的子路由

2 个答案: