Question

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

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

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

我考虑过的事情：

检查每个组件中是否存在client，client等，如果不存在，则提取它们。这可能会增加很多开销，此外，逻辑还应放入无法触发动作的选择器中。
使用服务来检查数据是否已经存在-如果没有，请加载它。将对每个URL更改进行检查，并且还可能降低应用程序的速度。
在应用程序的初始负载上触发数据获取-在哪里做？ agent？

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

Answer 1

一种实现此目的的方法是创建自定义data service

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方法。

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

1 个答案: