NGXS 错误：无法解析 TranslationEditorState 的所有参数：（？）

Posted 2023-02-19

【中文标题】NGXS 错误：无法解析 TranslationEditorState 的所有参数：（？）

【英文标题】：NGXS Error: Can't resolve all parameters for TranslationEditorState: (?)

【发布时间】：2020-06-11 13:10:57

【问题描述】：

我在 Angular 9 应用程序中使用 NGXS 进行状态管理。在其中一个状态类中，任何依赖注入都会导致错误“错误：无法解析 TranslationEditorState 的所有参数：(?)。”我尝试注入服务甚至 HttpClient，但问题仍然存在。事实上，对于任何状态类，我都会遇到相同的错误。难道跟app.module中Module注入的顺序有关系吗？

app.module.ts

import  BrowserModule  from '@angular/platform-browser';
import  APP_INITIALIZER, NgModule  from '@angular/core';

import  NgxsModule  from '@ngxs/store';
import  AuthModule  from './auth/auth.module';
import  AppComponent  from './app.component';
import  SharedModule  from './shared/shared.module';
import  AuthInterceptor  from './auth/auth.interceptor';
import  AppRoutingModule  from './app-routing.module';
import  configFactory  from './shared/utils/config.factory';
import  NgxsFormPluginModule  from '@ngxs/form-plugin';
import  NgxsLoggerPluginModule  from '@ngxs/logger-plugin';
import  HTTP_INTERCEPTORS  from '@angular/common/http';
import  ConfigService  from './shared/services/config/config.service';
import  NgxsReduxDevtoolsPluginModule  from '@ngxs/devtools-plugin';
import  TranslationEditorState  from './shared/state/translation-editor.state';
import  BrowserAnimationsModule  from '@angular/platform-browser/animations';
import  TranslationEditorModule  from './translation-editor/translation-editor.module';
import  ApplicationSectorState, ConfigState, InitialDataState, MenuState  from './shared/state';

const states = [ApplicationSectorState, ConfigState, InitialDataState, MenuState, TranslationEditorState];

@NgModule(
  declarations: [AppComponent],
  imports: [
    AuthModule,
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    NgxsModule.forRoot(states),
    NgxsFormPluginModule.forRoot(),
    NgxsReduxDevtoolsPluginModule.forRoot(),
    NgxsLoggerPluginModule.forRoot(),
    SharedModule,
    TranslationEditorModule,
  ],
  providers: [
    ConfigService,
    
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true,
    ,
    
      provide: APP_INITIALIZER,
      useFactory: configFactory,
      multi: true,
      deps: [ConfigService],
    ,
  ],
  bootstrap: [AppComponent],
)
export class AppModule 

状态类

import  tap  from 'rxjs/operators';
import  GetTranslations  from '../actions';
import  TranslationEditor  from '../model';
import  Action, State, StateContext  from '@ngxs/store';
import  TranslationEditorService  from '../../translation-editor/service/translation-editor.service';

@State<TranslationEditor>(
  name: 'translationEditor',
  defaults: 
    translations: ,
  ,
)
export class TranslationEditorState 
  constructor(private translationEditorService: TranslationEditorService) 

  @Action(GetTranslations)
  getTranslations( getState, patchState : StateContext<TranslationEditor>,  application, environment, languageCodes ) 
    return this.translationEditorService
      .getTranslations(application, environment, languageCodes)
      .pipe(
        tap(translations => 
          patchState(
            ...getState(),
            translations,
          );
        )
      )
      .subscribe(response => 
        console.log(response);
      );
  

服务：

import  Observable  from 'rxjs';
import  Store  from '@ngxs/store';
import  Injectable  from '@angular/core';
import  HttpClient  from '@angular/common/http';
import  InitialData, LabelValue  from '../../shared/model';

@Injectable(
  providedIn: 'root',
)
export class TranslationEditorService 
  baseUrl: string;

  constructor(private readonly http: HttpClient, private readonly store: Store) 
    this.baseUrl = this.store.selectSnapshot<string>(state => state.appConfig.baseApiUrl);
  

  getInitialData(): Observable<InitialData> 
    const url = `$this.baseUrl/initial-data`;
    return this.http.get<InitialData>(url)
  

  getTranslations(application: LabelValue, environment: LabelValue, languageCodes: Array<string>): Observable<any> 
    const url = `$this.baseUrl/applications/translations$application.value/env/$environment.value/translations`;
    return this.http.post(url, languageCodes);
  

【参考方案1】：

您需要为 IVY 添加@Injectable。

https://github.com/ngxs/store/blob/master/docs/advanced/ivy-migration-guide.md