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 中使用所需的最基本功能。