2

如果我们按照 ngrx-data 示例并查看Entity DataService，我们可以在没有任何配置的情况下获取我们在内存中（硬编码）的 Hero 数据。默认值将与我们配置的相同：

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 }]
})

问题：

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

root: 'api'

和来自 URL 的实体“Villans”的数据：

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

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

4

1 回答 1

2

在专门查看了文档后： Custom EntityDataService and 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

    • HeroDataService
    • VillanDataService
    • 生物数据服务
    • 数据A01数据服务
    • 等等

（文档和代码在这里） - 代码示例在

// 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 获取数据的方式相同。数据将从您在 const: rootUrls中设置的相应 URL 中提取。不要忘记配置和启动 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 {}
于 2020-06-07T15:57:15.123 回答