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

Question

如果我们按照 ngrx-data 示例并查看 Entity 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'

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

Answer 1

具体查看文档后: Custom EntityDataService和 Replace the 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 ( doc ) 替换为您自己的 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

   • 英雄数据服务
   • 别墅数据服务
   • 生物数据服务
   • DataA01数据服务
   • 等等

( doc and code is here ) - 代码示例在

//store/entity/hero-data-service.ts

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 获取数据一样。数据将从您在常量中设置的相应 URL 中提取:rootUrls。不要忘记配置和启动 URL 的数据服务器。

2. 一些重要的考虑因素:

   • 在您的服务器上，您可能需要启用 CORS 处理。例如:在 nestjs 上使用:

   app.enableCors();

   • 如果您的客户端应用程序使用:Angular in-memory-web-api 您需要启用对远程服务器的访问，如下所示:

文件:../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 {}