如何在角度分量中使用 NGXS Select()

Question

我刚刚设置了一个带有 NGXS 的 Angular 项目。

在我的 AuthState 中，我有以下内容：

@Injectable()
export class AuthState {
  @Selector()
  static isAuthenticated(state: AuthStateModel) {
    return state.currentUser !== null;
  }
  //...
}

在组件中，我正在执行以下操作：

export class HeaderComponent implements OnInit {
  @Select(AuthState.isAuthenticated) isAuthenticated$: Observable<boolean>;
  //...
}

但它给了我一个编译错误：

src/app/layout/header/header.component.ts:14:38 - error TS2564: Property 'isAuthenticated$' has no initializer and is not definitely assigned in the constructor.

14   @Select(AuthState.isAuthenticated) isAuthenticated$: Observable<boolean>;
                                        ~~~~~~~~~~~~~~~~

我完全理解为什么在这里，角度无法知道它将被正确初始化。

我搜索了一下，发现很多链接指向禁用属性初始化检查

"strictPropertyInitialization": false

在 tsconfig.json 中

但问题是我喜欢这个检查，我不想禁用它。必须有一种方法可以不为整个应用程序禁用此功能，但仍然使用 NGXS Select，对吗？

Answer 1

如果您确定不想初始化属性，则可以在属性类型之前使用 Typescript 非空断言运算符 (!)：

export class HeaderComponent implements OnInit {

  @Select(AuthState.isAuthenticated) isAuthenticated$!:Observable<boolean>;
  //...

}

它应该消除编译错误。这个操作符就像告诉 TypeScript ：我知道这个属性不会是未定义的，请不要对我大喊大叫 :D

它允许您保留装饰器，而不是将初始化移动到构造函数+您可以保留“strictPropertyInitialization”设置。