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

【问题标题】：How to configure storybook story for module with RouterLink如何使用 RouterLink 为模块配置故事书故事
【发布时间】：2020-05-01 23:42:36
【问题描述】：

由于错误，无法为使用 routerLink 的模块配置故事

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

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

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

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

如何配置这个模块，storybook有问题吗？

Storybook issue

【问题讨论】：

您还在寻找这个问题的答案吗？ Ling Vu 提出的答案对你有用吗？
有任何反馈吗？有用吗？

标签： angular storybook angular-storybook

【解决方案1】：

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

故事配置如下所示

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

而且你不需要路由配置 xD

【讨论】：

我仍然没有看到注入 RouterTestingModule 的意义，它应该用于单元测试和模拟路由，但如果它适合你也没关系。
这为所需指令提供了模拟，并且由于故事书的工作原理，它仅用于演示，因此不需要完整的 RouterModule

【解决方案2】：

我做了以下更改：

添加 RouterModule 包括 routes 数组（用于定义您的路线）
提供所需的 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 中

【讨论】：

这不解决问题，有同样的问题