时间戳

首页 > 解决方案 > 令人尴尬的简单 NGXS - 无法解析 LanguageState 的所有参数

angular - 令人尴尬的简单 NGXS - 无法解析 LanguageState 的所有参数

问题描述

我有点羞于发布这个，但我需要一个橡皮鸭。出于某种原因 - 将带有 HTTPClient 的构造函数添加到此类会导致错误“main.ts:12 Error: Can't resolve all parameters for LanguageState: (?).” 但我只是不知道为什么：

import { State, Action, Selector, StateContext } from "@ngxs/store";
import { ChangeLanguage } from "./language.actions";
import { Languages } from "src/app/globals/language.enum";
import { LabelDB } from "src/app/model/labelDB.model";
import { HttpClient } from '@angular/common/http';

export interface LanguageStateModel {
  currentLanguage: Languages;
  languageData: {
    labels: LabelDB[];
  };
}

@State<LanguageStateModel>({
  name: 'language',
  defaults: {
    currentLanguage: Languages.English,
    languageData: null,
  },
})
export class LanguageState {
  constructor(private http: HttpClient) {}

  @Selector()
  public static getCurrentLanguage(state: LanguageStateModel) {
    return state.currentLanguage;
  }

  @Action(ChangeLanguage)
  public changeLanguage(
    { patchState }: StateContext<LanguageStateModel>,
    action: ChangeLanguage
  ) {
    patchState({ currentLanguage: action.language });
  }
}

我尝试将 HTTPClientModel 作为导入添加到 NGXS 存储模块。尝试使用 Angular Injector 来获取 HTTP 模块。

我只是不明白，我知道它可能非常简单:(

重要提示：我知道我还没有在代码中的任何地方使用 HTTP 客户端 - 这是因为我删除了所有代码以使其正常工作:)

编辑：声明模块是标准的 NGXS Store 模块：

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";

import { NgxsModule } from "@ngxs/store";
import { NgxsReduxDevtoolsPluginModule } from "@ngxs/devtools-plugin";
import { NgxsLoggerPluginModule } from "@ngxs/logger-plugin";

import { environment } from "src/environments/environment";
import { LanguageState } from "./language/language.state";

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    NgxsModule.forRoot([LanguageState], {
      developmentMode: !environment.production,
    }),
    NgxsReduxDevtoolsPluginModule.forRoot({
      name: "NGXS store",
      disabled: environment.production,
    }),
    NgxsLoggerPluginModule.forRoot(),
    HttpClientModule
  ]
})
export class LocalNgxsModule {}

标签： angular

解决方案

我假设您使用的是 Angular 9。在最新版本中，所有提供或注入的令牌都必须具有@Injectable()装饰器。对于 ngxs 状态服务也是如此：

@State<LanguageStateModel>({
  name: 'language',
  defaults: {
    currentLanguage: Languages.English,
    languageData: null,
  },
})
@Injectable()
export class LanguageState {
  // ...
}

在这里阅读更多

推荐阅读