Как использовать Ngxs как отдельный компонент?

Question

Можно ли использовать Ngxs в автономном компоненте? Я пробовал импортироватьNgxsModuleследующими способами:

      @Component({
  ...
  imports: [
    ...
    NgxsModule.forFeature([MyState]),
...

и

      @Component({
  ...
  imports: [
    ...
    NgxsModule.forRoot([MyState]),
...

Но оба дают мне следующее сообщение об ошибке:Type 'ModuleWithProviders<NgxsFeatureModule>' is not assignable to type 'any[] | Type<any>'(илиNgxsRootModuleвforRootслучай). Также доступно более подробное сообщение об ошибке:'imports' contains a ModuleWithProviders value, likely the result of a 'Module.forRoot()'-style call. These calls are not used to configure components and are not valid in standalone component imports - consider importing them in the application bootstrap instead.

Поддерживается ли это, и у меня неправильный синтаксис? Или это не поддерживается? Если не поддерживается, что за блокировщик?

Answer 1

для корня ()

Вы можете использоватьimportProvidersFrom()от'@angular/core' NgxsModule.forRoot()внутри вашей функции начальной загрузки (так же, как SilasDerProfi написал до меня)

Внутри вашего main.ts:

      bootstrapApplication(
  AppComponent,
  {
    providers: [
      importProvidersFrom(
        NgxsModule.forRoot(
          [MyState, SidebarState, CoreState],
          {
            developmentMode: !environment.production,
            selectorOptions: {
              suppressErrors: false,
              injectContainerState: false
            }
          }
        ),
        NgxsResetPluginModule.forRoot(),
        // devtools always last
        NgxsReduxDevtoolsPluginModule.forRoot()
      )
    ]
    
  }
).catch(err => console.error(err));

forFeature() / при ленивой загрузке:

Вы можете установить свой ленивый загруженныйforFeature([FooState])пока вы объявляете свои маршруты.

Смотрите официальную документацию , или есть пример ленивых загруженных маршрутов:

      export default <Routes>[
  {
    path: '',
    loadComponent:
      () => import('./foo-list/foo-list.component')
        .then(mod => mod.FooListComponent),
    providers: [
      importProvidersFrom(
        NgxsModule.forFeature([FooOverviewState])
      )
    ]
  },
  {
    path: 'add',
    loadComponent:
      () => import('./foo-item-add/foo-item-add.component')
        .then(mod => mod.FooItemAddComponent),
    providers: [
      importProvidersFrom(
        NgxsModule.forFeature([FooState])
      )
    ]
  },
  {
    path: ':id',
    loadComponent:
      () => import('./foo-item-edit/foo-item-edit.component')
        .then(mod => mod.FooItemEditComponent),
    providers: [
      importProvidersFrom(
        NgxsModule.forFeature([FooState])
      )
    ]
  }
];

Answer 2

да поддерживается.

Как вы можете видеть в руководстве по автономному компоненту Angular :

Автономная операция начальной загрузки основана на явной настройке списка провайдеров для внедрения зависимостей. Однако существующие библиотеки могут полагаться на NgModules для настройки DI. Например, маршрутизатор Angular использует помощник RouterModule.forRoot() для настройки маршрутизации в приложении.

Так что можно решить проблему так же, как решают ее для роутера: