使用ngrx-data如何配置应用程序从特定的urls获取特定实体的数据

Question

如果我们遵循ngrx数据示例并查看实体DataService，我们可以在没有任何配置的情况下获取内存中的英雄数据(硬编码)。默认值的工作方式与我们配置的相同：

const defaultDataServiceConfig: DefaultDataServiceConfig = {
  root: 'api',      // or a running server url, e.g: 'http://localhost:4000/api'
  timeout: 3000,    // request timeout
}

例如: EntityStoreModule

@NgModule({
  providers: [{ provide: DefaultDataServiceConfig, useValue: defaultDataServiceConfig }]
})

问题：

我们将如何配置我们的应用程序从默认源获取实体"Heros“的数据：

root: 'api'

以及来自URL的实体"Villans“的数据：

root: 'http://localhost:4000/villans'

以及其他实体(其他/各种)各自网址的数据.？

Answer 1

在特别地回顾了文档：自定义EntityDataService和替换HttpUrlGenerator之后，我想出了这个解决方案。任何人都可以发表评论。

1. 定义/审查您的数据类型-实体元数据-实体名称；
2. 为非默认的复数实体名称创建到复数的映射(默认值为: name + 's')；
3. 对于具有非默认根URL的实体，创建实体名称到特定URL的映射；

档案：../entity-metadata.ts

                             // Step 1:
const entityMetadata: EntityMetadataMap = {
    Hero: {},
    Villan: {},
    Creature: {},
    DataA01: {}
    // etc.
}

                             // Step 2:
const pluralNames = {
    Hero: 'heroes',
    DataA01: 'data-a01'
}

export const entityConfig = {
    entityMetadata,
    pluralNames
};

                             // Step 3:
export const rootUrls = {
 // Hero:        - not needed here, data comes from default root
    Villan:      'http://localhost:4001',
    Creature:    'http://localhost:4001',
    DataA01:     'http://remoteserver.net:80/publicdata',
}

1. 将HttpUrlGenerator (文档)替换为您自己的URL生成器(DynamicHttpUrlGenerator)

文件：../http-dyn-url-generator.ts

import { Injectable } from '@angular/core';
import {
  DefaultHttpUrlGenerator,
  HttpResourceUrls,
  normalizeRoot,
  Pluralizer,
  DefaultPluralizer,
} from '@ngrx/data';
import { rootUrls } from '../data/ngrx-data/db01-entity-metadata';



@Injectable()
export class DynamicHttpUrlGenerator extends DefaultHttpUrlGenerator {

  constructor(private aPluralizer: Pluralizer = new DefaultPluralizer(undefined)) {
    super(aPluralizer);
  }

  protected getResourceUrls(entityName: string, root: string): HttpResourceUrls {
    let resourceUrls = this.knownHttpResourceUrls[entityName];
    if ( ! resourceUrls) {
                            // rootUrls contains
                            // mapping of individual ngrx data entities 
                            // to the root URLs of their respective data sources.
                            // It contains only entities which do not have
                            // the default root URL.
      if (rootUrls.hasOwnProperty(entityName)) {
         root = rootUrls[entityName];
      }
      const nRoot = normalizeRoot(root);
      const url = `${nRoot}/${this.aPluralizer.pluralize(entityName)}/`.toLowerCase();

                            // remove after testing
console.log('-- entityName: ' + entityName + ', URL: ' + url)

      resourceUrls = {
          entityResourceUrl: url,
          collectionResourceUrl: url
      };
      this.registerHttpResourceUrls({ [entityName]: resourceUrls });
    }
    return resourceUrls;
  }
}

1. 为每个数据实体创建一个自定义EntityDataService

- HeroDataService
- VillanDataService
- CreatureDataService
- DataA01DataService
- etc.

​

(医生和密码在这里) -代码示例如下

//存储/实体/英雄-数据服务

1. 在您的应用程序模块中注册您的DynamicHttpUrlGenerator和自定义EntityDataServices，在我的例子中：

文件：../ngrx-data-store.module.ts

(在一个简单的应用程序中，直接在文件:app.module.ts中)

@NgModule({
    imports: [ ... ],
    providers: [ { provide: HttpUrlGenerator, useClass: DynamicHttpUrlGenerator },
                 HeroDataService,
                 VillanDataService,
                 CreatureDataService,
                 DataA01DataService
               ]
 })

1. 在组件中为每个给定实体使用自定义EntityDataServices的方式与所有标准或默认EntityDataServices提取数据的方式相同。数据将从您在const: rootUrls中设置的相应URL中提取。不要忘记配置和启动URL的数据服务器。
2. 几个重要的考虑因素：

- on your server you may need to enable CORS handling. E.g: on nestjs use:

app.enableCors()；

- if your client app uses: Angular in-memory-web-api you need to enable access to remote server as follows:

​

文件：../in-mem-data.module.ts (或按您的名称)

import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemDataService } from '../../services/data/in-mem-data/in-mem-data.service';

@NgModule({
 imports: [
   HttpClientModule,
   HttpClientInMemoryWebApiModule.forRoot(InMemDataService, {
      passThruUnknownUrl: true   // <--- IMPORTANT for remote data access
    }),
 ]
})
export class InMemDataModule {}