Angular 路由 Storybook 插件

一个简单的插件，使在 Storybook 中使用 Angular 路由更加轻松

如何使用

通过 npm 安装插件

npm i storybook-addon-angular-router

将其添加到你的 Storybook 配置中

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

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

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

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

如果你想为单个故事**禁用**插件，可以将以下参数添加到你的故事中

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

工作原理

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