Angular 9 NgRx Data 添加方法 - 使用查询参数创建自定义端点；

Question

我在 Angular 9 项目上使用 NgRx 数据，我正在尝试使用 add() 方法保存用户。缺点是 api 端点类似于

http://localhost:{{port}}/something/{{clientId}}/users

用户组件

saveUser(user) {
    this.userService.add(user);
}

用户服务

export class UserService extends EntityCollectionServiceBase<User> {
        constructor(serviceElementsFactory: EntityCollectionServiceElementsFactory) {
            super('User', serviceElementsFactory);
        }
    }

有没有办法解决这个问题？我不想修改后端端点。

Answer 1

已解决.

注册了扩展 DefaultDataService 的新数据服务

src/app/store/entity-store-module.ts

import {EntityDataService} from '@ngrx/data';
import {TestDataService} from './test-data-service';
import {NgModule} from '@angular/core';

@NgModule({
    providers: [
        TestDataService
    ]
})
export class EntityStoreModule {
    constructor(
        entityDataService: EntityDataService,
        testDataService: TestDataService,
    ) {
        entityDataService.registerService('User', testDataService);
    }
}

src/app/store/test-data.service.ts

import {
    DefaultDataService,
    DefaultHttpUrlGenerator,
    DefaultPluralizer, HttpMethods,
    HttpUrlGenerator,
    Logger,
} from '@ngrx/data';
import {Injectable} from '@angular/core';
import {User} from '../users/models/user.model';
import {HttpClient} from '@angular/common/http';
import {pluralNames} from './entity-metadata';
import {Observable} from 'rxjs';

@Injectable()
export class TestDataService extends DefaultDataService<User> {
    constructor(
        http: HttpClient,
        httpUrlGenerator: HttpUrlGenerator,
        logger: Logger
    ) {
        logger.log(http, httpUrlGenerator);
        const url = new DefaultHttpUrlGenerator(new DefaultPluralizer([pluralNames]));
        url.registerHttpResourceUrls({Label: {entityResourceUrl: 'user', collectionResourceUrl: 'users'}});
        super('User', http, url);
    }

    protected execute(method: HttpMethods, url: string, data?: any, options?: any): Observable<any> {
        if (method === 'POST') {
            url = 'client/' + 1 + '/user'; // where 1 will be replaced dynamically
        }

        return super.execute(method, url, data, options);
    }
}

Angular 9 NgRx Data 添加方法 - 使用查询参数创建自定义端点；

Angulat 9 NgRx Data add method - create custom endpoint with query parameters;

typescript

ngrx

angular

angular-ngrx-data

ngrx-data