NGXS @Select装饰器访问状态模型属性的正确方式

嘿，我来帮你搞定这个NGXS的状态属性访问问题～首先得先纠正一个小细节：你在组件里把user$的类型标注成Observable<UserState>是不对的，@Select(UserState)返回的是对应状态的状态模型实例，也就是UserStateModel类型，所以第一步要先修正类型。

接下来给你几种常用的正确访问方式：

1. 手动订阅时直接访问属性 #

先修正组件里的类型定义，然后在subscribe回调里直接通过对象属性访问：

export class MyComponent {
  // 修正类型为Observable<UserStateModel>
  @Select(UserState) user$: Observable<UserStateModel>;

  ngOnInit(){
    this.user$.subscribe(user => {
      // 直接访问状态模型的属性
      console.log(user.firstname, user.lastname);
    });
  }
}

注意：因为你的状态默认值是{}，初始状态下firstname和lastname都是undefined，如果需要处理空值，可以加个判断或者给默认值赋初始值。

2. 使用Angular Async管道在模板中访问 #

这是更推荐的Angular风格，不用手动管理订阅，还能避免内存泄漏：

// 组件里还是先修正类型
export class MyComponent {
  @Select(UserState) user$: Observable<UserStateModel>;
}

然后在模板里用async管道+安全导航符（避免初始空值报错）：

<p>First Name: {{ (user$ | async)?.firstname }}</p>
<p>Last Name: {{ (user$ | async)?.lastname }}</p>

3. 直接选择单个属性（更精准） #

如果只需要状态里的某一个属性，可以在@Select里传入投影函数，直接订阅单个属性的流：

export class MyComponent {
  // 直接订阅firstname属性
  @Select(state => state.user.firstname) firstname$: Observable<string>;
  // 直接订阅lastname属性
  @Select(state => state.user.lastname) lastname$: Observable<string>;

  ngOnInit(){
    this.firstname$.subscribe(name => {
      console.log('First name:', name);
    });
  }
}

模板里同样可以用async管道：

<p>First Name: {{ firstname$ | async }}</p>

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