在Angular中,可以使用ngrx库来管理状态,并使用参数化的记忆化选择器来选择和转换存储的数据。下面是一个示例解决方法:
npm install @ngrx/store @ngrx/effects @ngrx/entity @ngrx/store-devtools
app.state.ts
的文件,用于定义应用程序的状态。在这个文件中,可以定义存储的数据结构和初试状态。例如:export interface AppState {
users: User[];
selectedUserId: number | null;
}
export interface User {
id: number;
name: string;
email: string;
}
export const initialAppState: AppState = {
users: [],
selectedUserId: null
};
user.selectors.ts
的文件,用于定义选择器。选择器是一个纯函数,它从存储中选择和转换数据,并返回所需的数据。例如:import { createSelector } from '@ngrx/store';
import { AppState, User } from './app.state';
export const selectUsers = (state: AppState) => state.users;
export const selectSelectedUserId = (state: AppState) => state.selectedUserId;
export const selectSelectedUser = createSelector(
selectUsers,
selectSelectedUserId,
(users: User[], selectedUserId: number | null) => {
return users.find(user => user.id === selectedUserId);
}
);
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { AppState, User } from './app.state';
import { selectSelectedUser } from './user.selectors';
@Component({
selector: 'app-user-details',
templateUrl: './user-details.component.html',
styleUrls: ['./user-details.component.css']
})
export class UserDetailsComponent implements OnInit {
selectedUser: User | null;
constructor(private store: Store) {}
ngOnInit() {
this.store.select(selectSelectedUser).subscribe(user => {
this.selectedUser = user;
});
}
}
在这个示例中,selectSelectedUser
选择器从存储中选择了users
和selectedUserId
,并返回所选的用户对象。在组件的ngOnInit
方法中,订阅了选择器的结果,并将其赋值给selectedUser
属性。
这就是一个使用Angular和ngrx实现参数化的记忆化选择器的示例解决方法。希望对你有所帮助!