如何在独立组件中使用 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

forRoot()

您可以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])您可以在声明路线时设置惰性加载。

看官方文档，或者有一个延迟加载路由的例子：

import { importProvidersFrom } from '@angular/core';

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

是的，它受到支持。

\n

正如您在Angular 独立组件指南中所看到的：

\n

\n

独立引导操作基于显式配置用于依赖项注入的提供程序列表。然而，现有的库可能依赖 NgModules 来配置 DI。例如，Angular\xe2\x80\x99s 路由器使用 RouterModule.forRoot() 帮助器在应用程序中设置路由。

\n

\n

所以你可以像解决路由器问题一样解决问题：

\n

\r\n

\r\n

bootstrapApplication(AppComponent, {\n  providers: [\n      importProvidersFrom(NgxsModule.forRoot([MyState])),\n    // ...\n  ]\n});

\r\n

\r\n

\r\n

\n