angular - 如何根据@ngrx 中的路由获取数据？

问题描述

我们构建了一个 web 应用程序，用户必须在其中单击列表才能进入某个编辑视图。例如，从登录页面，用户选择一个客户端，然后选择一个代理，然后进入该代理的编辑视图。在这种情况下，URL 将包含 ID /client/4/agent/7/edit：。@ngrx/router-store用于处理 URL 更改，因此当直接访问上面的 URL 时，编辑视图出现并且工作正常。

该应用程序还包含一个面包屑，它显示的不是 ID，而是路径的名称：客户：公司 > 代理：邮政 > 编辑时间client = { id: 4, name: 'Company' }和agent = { id: 7, name: 'Postal' }。我们通常在单击对应列表条目时获取此数据（client和）。agent

/client/4/agent/7/edit但是，当直接访问类似 URL 时，不会client存储包含名称的 -Object。当以 reduxy 方式直接访问 URL 时，如何获取属于路由的对象？我知道如何将其破解到应用程序中，但数据流应该保持良好和干净的reduxy。

我考虑过的事情：

检查每个组件中是否存在client等agent，如果它们不存在，则获取它们。这可能会产生很多开销，此外，逻辑应该进入无法触发操作的选择器。
使用服务来检查数据是否已经存在 - 如果没有，则加载它。将在每次 URL 更改时进行检查，并且还可能减慢应用程序的速度。
在应用程序的初始加载时触发数据获取 - 在哪里执行此操作？AppComponent?

我也愿意重构整个应用程序（使用另一个路由，引入@ngrx/effects，重新定义 API 等）

标签： angularreduxngrxngrx-router-store

实现此目的的一种方法是创建自定义数据服务

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DefaultDataService, HttpUrlGenerator, Logger } from '@ngrx/data';
import { Hero } from '../../model/job/hero';

@Injectable({
  providedIn: 'root'
})
export class HeroDataService  extends DefaultDataService<Hero> {

  constructor(http: HttpClient, httpUrlGenerator: HttpUrlGenerator, logger: Logger) {
    super('Hero', http, httpUrlGenerator);
    logger.log('Created custom Hero EntityDataService');
  }

  public setEntitiesUrl(entitiesUrl) {
    this.entitiesUrl = entitiesUrl;
  }

  public setEntityUrl(entityUrl) {
    this.entityUrl = entityUrl;
  }

}

然后在您的实体商店模块中注册它：

  constructor(
    heroDataService: HeroDataService
    ) {
    entityDataService.registerService('Hero', heroDataService);
  }

然后在您的组件中，设置您的自定义路径，然后再调用您的 EntityCollectionService（即，对于 entityCollection）

this.heroDataService.setEntitiesUrl('myCustomPath');
this.heroes$ = this.heroService.getAll();

对于单个实体，请改为调用 setEntityUrl 方法。

angular - 如何根据@ngrx 中的路由获取数据？

问题描述

解决方案

推荐阅读