标签: angular-ngrx-data

Ngrx-data 选择单个实体

我正在使用 ngrx-data 插件(在 ngrx 之上运行),并且我试图从商店中选择一个实体(ngrx 数据调用“缓存”)。我发现您可以将单个实体添加到缓存中,但我找不到从商店中检索单个项目(基于 Id)的方法。

我必须为此编写自己的选择器吗?我假设 ngrx-data 会提供这样一个简单的操作

ngrx angular angular-ngrx-data

3
推荐指数
1
解决办法
2643
查看次数

NgRx 数据 DefaultDataServiceConfig

我刚刚开始在我的项目中使用NgRx Data,我搜索了几个小时,但找不到我面临的问题的解决方案。

我正在尝试使用DefaultDataServiceConfig来更改调用的默认根,如下所示:

应用程序模块.ts

export const defaultDataServiceConfig: DefaultDataServiceConfig = {
  root: `${environment.apiUrl}/`,
};

@NgModel({
   ...
   providers: [
      {
         provide: DefaultDataServiceConfig
         useValue: defaultDataServiceConfig
      }
   ]
});
Run Code Online (Sandbox Code Playgroud)

环境.ts

export const environment = {
   ...
   apiUrl: 'https://my-api.com/v1',
};
Run Code Online (Sandbox Code Playgroud)

但是,调用将转到localhost http://localhost:3000/client/list而不是my-api.com https://my-api.com/v1/client/list

我缺少什么吗?我找不到任何示例,而且ngrx.io文档也很糟糕。

ngrx angular angular-ngrx-data

3
推荐指数
1
解决办法
1074
查看次数

如何在 @ngrx/data 中扩展自定义实体集合缩减器

在阅读并尝试了迄今为止的所有内容以将我的additionalCollectionStates更新到我的EntityCollection(基于文档中的一些信息,这个SO问题另一个SO问题另一个SO问题github存储库中的一个问题)之后,我发现自己陷入了困境应该是一个相当常见的任务,并且在使用 ngrx 之前根本没有问题:使用 ngrx 对存储的实体集合进行排序。搜索解决方案让我回到我已经看过 5 次的 10 个链接,大多数示例要么太基础,要么过时,要么根本不使用 ngrx/data,或者类似的问题根本没有答案。

环境:Angular 9.1.7、ngrx 9.1.2、macOS 10.14.6

目标

按照排序和分页文档中的描述,将自己添加并更新additionalCollectionState到我的 EntityCollection 。我没有从服务器获取sortQuery属性(sortField、sortDirection),而是在 GUI 中设置它并根据它们对集合进行排序。我知道 EntityMetadataMap 上存在设置,但它对我来说不够灵活,我想动态地对应用程序中不同 MatTable 中的集合进行排序。只要 MatTable 中的排序顺序/字段发生更改,就应该更新此附加属性。sortComparer

到目前为止我所取得的成就:

如上所述,additionalCollectionState 的 ngrx/data 方式有效我的集合是用我在 EntityMetadataMap 中提供的数据初始化的。然而,更新自定义集合属性并不像我从文档中理解的那样工作。由于我没有从服务器获取sortQuery属性,因此不会调用 ResultsHandler。

我通过两种方式解决了这个问题:a)使用 ngrx 和 ngrx/entity 方法,b)通过尝试扩展自定义EntityCollectionReducer的 ngrx/data 方式

a) 我成功创建了自定义 Action 和自定义Reducer 并更新了状态属性,但没有更新之前定义的集合属性。我的行动基本上是:

export const selectResourceSortQuery = createAction('[Resource] Get …
Run Code Online (Sandbox Code Playgroud)

angular ngrx-entity angular-ngrx-data ngrx-data

3
推荐指数
1
解决办法
3205
查看次数

ngrx/data 是否提供了一种方法来为我的 DefaultDataService 定义自定义基本 API 路径,然后引用该路径?

我正在将 Angular 13 与 NgRx/数据和实体 (v 13) 结合使用。我已经定义了以下数据服务,我希望在其中覆盖用于检索实体的 URL ...

export class MyObjectService extends DefaultDataService<MyObject> {
    ...  
    getAll(): Observable<FinanceCustomer[]> {
        return this.http.get('http://localhost:8085/myapi/myobjects').pipe(
          map((response: any) => {
            ...
            return data;
          })
        );
      }
Run Code Online (Sandbox Code Playgroud)

这一切都运行良好,但我很好奇是否可以稍微清理一下。如果我重写另一个方法,我不希望对基本 URL“http://localhost:8081/myapi/”进行两次硬编码(一次在getAll()另一个方法中)。NgRx/data 是否允许我为服务定义自定义基本 URL,然后我可以在我要重写的后续服务调用中引用该 URL?

angular ngrx-entity angular-ngrx-data angular13

3
推荐指数
1
解决办法
281
查看次数

Angular + Ngrx:在组件和函数中选择值的最佳实践

我有与ngrx get value in function几乎相同的问题,但我想知道答案(请参阅该主题中的评论)是否仍然是当今的最佳实践。

我的情况是:

  1. 我想从商店获取 2 个值以显示在我的组件中 --> 我使用选择器和异步管道
  2. 我需要将这些相同的值传递给 Angular Material 对话框,以便在对话框组件中使用它们。

我有一个可行的解决方案:我在 ngOnInit() 中使用订阅函数,并使用 Observable 中的值设置一个局部变量。因此,我不再需要使用异步管道,我可以轻松地将值传递给某些函数...这听起来像是最好的选择,但在我寻找答案的任何地方,我都会看到“避免使用订阅”。

所以我想知道:

  • 有没有更好的方法来处理这种情况?
  • 或者这是“处理这种情况的 ngrx/rxjs 方式”?
  • 或者我是否使用选择器 Observable 和异步管道来显示组件中的值并订阅 Observable 以创建一个局部变量来传递给我的函数(这似乎有点多余......)
  • 或者 ...?

我的问题是我想要一种一致的方法来处理 ngrx 值,但现在看起来我需要根据情况使用两种方法:

  • 用于显示组件中的值的异步管道(社区的首选方法)
  • 在本地函数中使用值时的订阅(社区建议“除非必要”不要使用订阅)

(令我惊讶的是:很难在互联网上找到明确的答案......)

redux ngrx angular angular-ngrx-data rxjs-observables

2
推荐指数
1
解决办法
2203
查看次数

NGRX/数据实体 getAll 将旧数据与新数据连接而不是更新

我正在尝试使用ngrx-data-lab作为我项目的示例。

这是我使用的项目的stackblitz

我无法使用我正在使用的服务器的实际 url。该网址属于我公司。但是发生的事情是服务器将随机生成的数据返回给应用程序。问题是存储中的实体不会被替换,而是被加起来。每次刷新英雄页面时,服务器都会带来新数据并将其与旧数据连接起来。

entity-store.module.ts 中,我将defaultDataServiceConfig root 和 Hero urls更改为我的服务器。getAll() 有效,但正如我再次所说,它将数据连接到旧数据。

  root: 'api', // default root path to the server's web api

  // Optionally specify resource URLS for HTTP calls
  entityHttpResourceUrls: {
    // Case matters. Match the case of the entity name.
    Hero: {
      // You must specify the root as part of the resource URL.
      entityResourceUrl: 'api/hero/',
      collectionResourceUrl: 'api/heroes/'
    }
  },
Run Code Online (Sandbox Code Playgroud)

如何让 getAll 替换旧数据而不是连接它?

ngrx angular angular-ngrx-data

1
推荐指数
1
解决办法
665
查看次数

在页面刷新中:ngrx 存储调度问题与守卫 canactivate

我没有登录页面,这是 sso 调用

在应用程序组件中,我已经调度了一个操作来加载服务器端令牌调用并获取令牌,并且根据用户角色,我可以激活路由中的防护。如果守卫激活返回 true,我将进入仪表板页面。

在仪表板页面中,我在浏览器 URL 中有一个刷新,可以激活在登录操作效果之前执行,因此可以激活返回 false 且页面显示空白。

在仪表板中有子路由,也有一些子链接,例如产品仪表板/产品,也有激活的防护,但可以在登录调度操作影响成功调用之前激活返回 false。

谁能帮助我我做错了什么?

这里是路由,

  {
    path: '',
    component: HomeComponent,
    canActivate:[AuthGuard],
    children: [
      {
        path: 'product',
        loadChildren: () => productModule
      },
      {
        path: 'order',
        loadChildren: () => orderModule
      }
    ]
  },
Run Code Online (Sandbox Code Playgroud)

这是激活方法:这里我从效果调用中获得成功,同时从 app.component 调度一个操作:

  canActivate(): Observable<boolean> {
     return this.store.select(appState => appState.auth.isAuthenticated)
      .pipe(map(authUser => {

        if (!authUser) {
          return authUser;
        }
        return authUser;
      }))
    }
Run Code Online (Sandbox Code Playgroud)

应用程序组件:

ngOnInit(){



   this.onSubmit();

}

onSubmit(): void {
  const payload = {
    email: 'test@test.com',
    password: 'admin'
  };
  alert('dispatch …
Run Code Online (Sandbox Code Playgroud)

ngrx-effects angular ngrx-store-4.0 angular-guards angular-ngrx-data

1
推荐指数
1
解决办法
2347
查看次数