3

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

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

该category参数可以具有诸如“ free ”、“ top ”、“ paid ”之类的值，这些值使用导航栏路由到。

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

我通过将 设置为“/browse”来尝试使用index路由，如下所示CategoryComponentindex

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

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

4

2 回答 2

1

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

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

但是，如果您的数据来自外部，比如说查询字符串，那么您应该将其保存到存储中（通过调度操作），并且其他组件应该从存储中获取这些数据。

在只是角度你可以做到这一点：https ://angular.io/docs/ts/latest/cookbook/component-communication.html

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

在你的情况下

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

我希望它是有帮助的。

于 2016-10-17T21:49:02.780 回答
0

来自 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);
  }
于 2016-06-19T02:09:14.600 回答