Как получить параметры маршрута из текущего и родительского маршрутов и получить данные из хранилища Redux? - PullRequest
Новая
       4

Как получить параметры маршрута из текущего и родительского маршрутов и получить данные из хранилища Redux?

0 голосов
/ 25 сентября 2018

Я создаю приложение с 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.

Какой самый простой способ сделать это? Основная проблема заключается в том, что мне нужен идентификатор проекта для получения объекта инструмента.

Я пытался сделать следующее (внутри моего 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)
            );
          })
        );
      })
    );
  }

Но, похоже, это не работает. Я не смог найти никаких документов, связанных с этим делом.

...