Angular Router Storybook 插件

一个简单的插件，让在 Storybook 中使用 Angular Router 变得更容易

如何使用

通过 npm 安装插件

npm i storybook-addon-angular-router

将其添加到你的 Storybook 配置中

// .storybook/main.js
module.exports = {
    addons: ["storybook-addon-angular-router"],
};

路由器上的每次 navigate 和 navigateByUrl 调用现在都会连同所有参数一起记录在操作面板中。

如果你想在你的 story 中测试 routerLinkActive 指令，你可以像这样设置 story 的活动路由

export const WithActiveLink = Template.bind({});
WithActiveLink.parameters = {
    angularRouter: {active: '/location/1'}
};

如果你想禁用某个 story 的插件，你可以为你的 story 添加以下参数

export const DisabledPlugin = Template.bind({});
DisabledPlugin.parameters = {
    angularRouter: {disable: true}
}

工作原理

该插件将 RouterTestingModule 和一个自定义的 Router 实现添加到你的 stories 中。自定义的 Router 实现仅提供在你的 stories 中使用所需的最基本功能。