NGXS v3.1带参数@Selector()使用：自定义选择器示例解析

从NGXS v3.1版本开始，官方终于补上了大家期待已久的@Selector()参数支持功能！不用再为了传参写各种变通方案，直接就能在选择器里处理动态参数啦。

第一步：定义带参数的选择器 #

咱先看官方的示例，定义一个能根据类型筛选熊猫的选择器：

@State<string[]>({ name: 'animals', defaults: [] })
@Injectable()
export class ZooState {
  @Selector()
  static pandas(state: string[]) {
    // 返回一个接收参数的闭包函数，结合state做筛选
    return (type: string) => {
      return state
        .filter(s => s.includes('panda'))
        .filter(s => s.includes(type));
    };
  }
}

这里的核心是选择器方法本身返回一个接收参数的闭包，这样就能同时利用外部的state和传入的动态参数完成逻辑处理。

第二步：在组件中调用带参数的选择器 #

定义好之后，在组件里就可以这样调用：

import { Component } from '@angular/core';
import { Store } from '@ngxs/store';
import { ZooState } from './zoo.state';
import { map } from 'rxjs/operators';

@Component({
  template: `
    <ul>
      <li *ngFor="let panda of giantPandas$ | async">
        {{ panda }}
      </li>
    </ul>
  `
})
export class ZooComponent {
  // 筛选"giant"类型的熊猫
  giantPandas$ = this.store.select(ZooState.pandas).pipe(
    map(filterFn => filterFn('giant'))
  );

  constructor(private store: Store) {}
}

如果你想在模板里直接使用，也可以这么写（不过更推荐在组件类里处理逻辑，保持模板简洁）：

<div *ngIf="(store.select(ZooState.pandas) | async) as filterPandas">
  <p *ngFor="let panda of filterPandas('red')">{{ panda }}</p>
</div>

内容的提问来源于stack exchange，提问作者Jose