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

Posted 2023-02-19

【中文标题】如何使用 RouterLink 为模块配置故事书故事

【英文标题】：How to configure storybook story for module with 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 提出的答案对你有用吗？

有任何反馈吗？有用吗？

【参考方案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 中

【讨论】：

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