Question

我正在使用Angular 6和Redux构建应用程序。

在许多组件中，当我需要从Redux存储中获取数据时，我使用的是记录良好的模式（https://angular.io/guide/router#activated-route-in-action）从路由中获取route参数。因此，在一个简单的情况下，该组件可能看起来像这样：

export class ProjectComponent implements OnInit {

  activeProject$: Observable<ActiveProject>;

  constructor(private route: ActivatedRoute,
              private projectActions: ProjectActions,
              private store: NgRedux<AppState>) { }

  ngOnInit() {
    this.activeProject$ = this.route.paramMap.pipe(
      switchMap((params: ParamMap) => {
        const id = +params.get('id');

        this.projectActions.loadProjectById(id);

        return this.store.select<ActiveProject>(['projectList', 'map', id]);
      })
    );
  }

}

这很清楚，效果很好。现在，我有一个以上子组件，该子组件的路由如下所示：

...
{
  path: 'project/:id',  component: ProjectComponent,
  children: [
    {path: 'tool/:toolId',  component: ProjectToolComponent }
  ]
}
...

因此，在ProjectToolComponent中，我需要获取两个参数并从商店中获取两个对象：Project和ProjectTool。

最简单的方法是什么？主要问题是，我需要项目ID才能获取工具对象。

我尝试做的是（在我的ProjectToolComponent内部）：

ngOnInit() {
    this.tool$ = this.route.parent.paramMap.pipe(
      switchMap((parentParams: ParamMap) => {
        this.projectId = +parentParams.get('id');

        return this.route.paramMap.pipe(
          switchMap((params: ParamMap) => {
            this.utilizationId = +params.get('utilizationId');

            this.projectToolUtilizationActions.loadProjectTools(this.projectId);

            return this.store.select<ToolUtilization>(['projectToolsMap', this.projectId]).pipe(
              find(tool => tool.id === this.utilizationId)
            );
          })
        );
      })
    );
  }

但是，它似乎不起作用。我找不到与此案有关的任何文档。

如何从当前和父路由获取路由参数以及如何从Redux存储中获取数据？

0 个答案: