如何使用 RouterLink 为模块配置故事书故事

Question

由于错误

，无法为使用 routerLink 的模块配置故事

ERROR NullInjectorError: StaticInjectorError(DynamicModule)[RouterLinkActive -> Router]

重现重现该行为的步骤： demo-app 运行应用程序，您可以测试没有可能的解决方案来添加 RouterModule 来处理故事。它不能配置为 RouterTestingModule、RouterModule、RouterModule.forRoot 和 iframe.html 路径。关于缺少提供者总是有同样的错误。

预期行为使用 routerLink运行应用程序和故事

其他上下文最新版本的故事书 5.3.3 和 angular ~8.2.14 我正在使用不同的配置 5.2.8，但没有出现此问题。

如何配置这个模块，故事书有问题吗？

Storybook issue

Answer 1

我做了以下更改：

添加 RouterModule 包括路由数组（用于定义您的路由）
提供所需的 APP_BASE_HREF.

navbar.module.ts

const routes: Routes = [];


@NgModule({
  declarations: [NavbarComponent],
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  providers: [{provide: APP_BASE_HREF, useValue: '/'}],
  exports: [NavbarComponent]
})
export class NavbarModule {
}

之后你只需要将 <router-outlet></router-outlet> 添加到你的 NavbarComponent

Answer 2

Storybook 的工作方式与 angular 不同，所以我不需要将 FeatureModule 注入到故事中，Component 就可以了。当只有NavbarComponent被注入RouterTestingModule

故事配置如下所示

storiesOf('Navbar', module)
  .addDecorator(
    moduleMetadata({
      imports: [BrowserAnimationsModule, RouterTestingModule],
      declarations: [NavbarComponent],
    }),
  )

而且你不需要路由配置 xD

如何使用 RouterLink 为模块配置故事书故事

How to configure storybook story for module with RouterLink

angular

storybook

angular-storybook