ngrx 问题“NullInjectorError：没有 ComponentStore 的提供程序！”

Question

我是一名 ngrx 菜鸟（做过一次，但仍然很新）。当我尝试访问使用 ngrx 的页面时，开发人员控制台中出现此错误：

ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[MembershipComponent -> ComponentStore]: 
  StaticInjectorError(Platform: core)[MembershipComponent -> ComponentStore]: 
    NullInjectorError: No provider for ComponentStore!
NullInjectorError: StaticInjectorError(AppModule)[MembershipComponent -> ComponentStore]: 
  StaticInjectorError(Platform: core)[MembershipComponent -> ComponentStore]: 
    NullInjectorError: No provider for ComponentStore!

这是我在 package.json 中的 ngrx 包：

"@ngrx/component-store": "^10.0.0",
"@ngrx/store": "^8.6.1",

这是存储文件（它被剥夺了任何附加逻辑，因为我只是在尝试完成事情：

import { Injectable } from "@angular/core";
import { Location } from "@irhis-clients/dewco/src/lib/core/locations";
import { BehaviorSubject, Observable } from "rxjs";
import { map } from "rxjs/operators";
import { EnumValues } from 'enum-values';
import { Store } from '@ngrx/store';
import { ComponentStore } from '@ngrx/component-store';
import { Membership, IUserRequestState } from "../../common/interfaces/user-related";


@Injectable()
export class UserRequestStore extends ComponentStore<IUserRequestState>{

  memberships$: Observable<Membership[]>;
  membershipLength$: Observable<number>;
  roles$: Observable<string[]>;

  constructor(
    private cs: ComponentStore<IUserRequestState>,
    private s: Store<IUserRequestState>
  ) {
    super({ //initial state; can also be set with .setState
      memberships: [],
      roles: EnumValues.getValues(null)
    })

  }

  public addMembership(membership: Membership) {}
  
  public removeMembership(index: number) {}
}

发生事情的组件是用户请求。在其构造函数中，我调用了存储，作为注入：

private userRequestStore: UserRequestStore,

为什么我收到错误？我已经成功安装了 ComponentStore：

ng add @ngrx/store
ng add @ngrx/component-store

我在用户请求模块：

RouterModule.forChild([
      { path: '', pathMatch: 'full', component: UserRequestComponent }
    ]),

在 AuthModule 中，我延迟加载了该模块：

{path: 'user-request', loadChildren: './user-request/user-request.module#UserRequestModule'}

Answer 1

当您没有共享产生错误的组件时，很难 100% 确定，但我认为问题出在 MembershipComponent 中，您没有将 UserRequestStore 添加到其提供程序。它应该如下所示：

@Component({
  selector: 'membership-component',
  templateUrl: './membership.component.html',
  styleUrls: ['./membership.component.scss'],
  providers: [UserRequestStore], <--- This is what you are probably missing
})
export class PersonContainerComponent implements OnInit {
  constructor(
    private readonly _userRequestStore: UserRequestStore
  ) {}
}

因此，在 @Component 装饰器中，如果您还没有这样做，则需要将 UserRequestStore 添加到其提供者数组中。您可以在此处阅读有关它的更多信息并访问存储库