我正在使用 ngrx-data 插件(在 ngrx 之上运行),并且我试图从商店中选择一个实体(ngrx 数据调用“缓存”)。我发现您可以将单个实体添加到缓存中,但我找不到从商店中检索单个项目(基于 Id)的方法。
我必须为此编写自己的选择器吗?我假设 ngrx-data 会提供这样一个简单的操作
我刚刚开始在我的项目中使用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文档也很糟糕。
在阅读并尝试了迄今为止的所有内容以将我的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 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?
我有与ngrx get value in function几乎相同的问题,但我想知道答案(请参阅该主题中的评论)是否仍然是当今的最佳实践。
我的情况是:
我有一个可行的解决方案:我在 ngOnInit() 中使用订阅函数,并使用 Observable 中的值设置一个局部变量。因此,我不再需要使用异步管道,我可以轻松地将值传递给某些函数...这听起来像是最好的选择,但在我寻找答案的任何地方,我都会看到“避免使用订阅”。
所以我想知道:
我的问题是我想要一种一致的方法来处理 ngrx 值,但现在看起来我需要根据情况使用两种方法:
(令我惊讶的是:很难在互联网上找到明确的答案......)
我正在尝试使用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 替换旧数据而不是连接它?
我没有登录页面,这是 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