Question

我正在尝试创建自定义@Select（）以便能够向下钻取特定树并动态返回值。得到未定义或未进行（执行）

user.component.ts

const location = 'new york'
@Select(state => UserState.getUserLocationSlots(state, location)) slots$;

user.state.ts

@Selector() 
static getUserLocationSlots(state: UserStateModel, location: any) {
  console.log(state);
  console.log(location); // <-- expecting 'new york', but getting undefined
}

Answer 1

您可以通过使用crateSelector中的@ngxs/store函数来实现此目的

在您的.state.ts文件中：

static getLocationSlots(location: string) {
    return createSelector([UserState], (state: string[) => {
        // logic for filtering your data
        // eg.: state.filter(element => element == location)
    })
}

In your .component.ts file:

@Select(UserState.getLocationSlots('new york')) slots$: Observable<any>

您也可以查看here了解更多详细信息

Answer 2

我不认为可以将参数传递给ngxs v2中的@Selector()修饰函数。这会很好。

此feature request存在一张票。

另外，我认为您没有正确使用@Selector（）。我应该是这样的（因此，不能传递参数）：

@Select(UserState.getUserLocationSlots) slots$

请参阅docs。

注意：我不是ngxs的专家......这只是基于我现在所理解的。

Answer 3

要传递参数，可以让select返回一个函数，虽然不美观，但是可以使用。

例如，select语句如下所示：

  @Selector()
  static getItemByIdFn(state: { [id: number]: Entity }) {
    return (id: number) => {
      return state[id];
    };
  }

然后在组件中：

this.store.select(MyState.getItemByIdFn)
  .pipe(map(mapByIdFn) => mayByIdFn(1)) // using the returned function
  .subscribe(...);

请注意地图，这是您将ID传递给返回的函数的地方。在这里您可以放置任何您想要的参数。

希望这会有所帮助：）！

Answer 4

这可以在NGXS v2＆amp; V3。在动态选择器here

的讨论中复制了我的评论

我们现在可以使用常用于redux的模式来实现这一目标   选择器...

可以编写@Selector装饰器，以便它返回一个函数   使用所需的参数。这启用了所需的动态选择器   参数以及所选州的后期解决方案。对于   例如：
@State<UserStateModel>( ... ) 
export class UserState {   
  @Selector()  
  getFilteredUsersFn(userStateModel: UserStateModel) {
    return (filter: string) => 
      userStateModel.users.filter((user) => user.indexOf(filter) >= 0);
  }
} 
然后该组件将包含：
@Component({...}) 
export class AppComponent {  
  @Select(UserState.getFilteredUsersFn) 
  filteredUsersFn$: Observable<(filter: string) => User[]>;

  get currentFilteredUsers$() {
    return this.filteredUsersFn$
      .pipe(map(filterFn => filterFn('myFilter')));   
  } 
} 

NGXS - 自定义选择（）

4 个答案: