Angular Storybook：如何在故事中使用带依赖的ToasterService且不创建独立组件？

要在Storybook的内联渲染模板中使用带有构造函数依赖的ToasterService，可以按照以下步骤实现：

1. 导入必要依赖
   除现有导入外，补充Angular的inject函数、ToasterService及其依赖的模块（对应Overlay和BreakpointObserver的CDK模块）：

   import { inject } from '@angular/core';
   import { ToasterService } from 'path/to/your/toaster.service';
   import { OverlayModule } from '@angular/cdk/overlay';
   import { LayoutModule } from '@angular/cdk/layout';
   

2. 配置Story的模块元数据
   通过moduleMetadata告知Storybook的Angular环境加载ToasterService所需的依赖模块，并注册服务：

3. 在渲染逻辑中获取服务实例
   在render函数内利用inject()函数获取ToasterService实例，随后在点击回调中调用其方法。

完整修改后的代码示例：

// ... (已有的导入)
import { inject } from '@angular/core';
import { ToasterService } from 'path/to/your/toaster.service';
import { OverlayModule } from '@angular/cdk/overlay';
import { LayoutModule } from '@angular/cdk/layout';

export const Toaster: Story<ToastersComponent> = () => ({
  moduleMetadata: {
    imports: [OverlayModule, LayoutModule], // 加载ToasterService依赖的CDK模块
    providers: [ToasterService] // 注册ToasterService
  },
  render(args) {
    // 在Angular注入上下文内获取服务实例
    const toasterService = inject(ToasterService);

    return {
      props: {
        ...args,
        generateToaster: () => {
          // 调用ToasterService的show方法，传入你的配置
          toasterService.show({
            message: 'Toaster triggered!',
            type: 'success' // 示例配置，根据你的服务实际参数调整
          });
        }
      },
      template: `
        <div>
          <button (click)="generateToaster()"> Show Toaster</button>
        </div>
      `,
    };
  },
});

关键说明 #

• moduleMetadata是Storybook Angular的核心配置项，确保所有依赖的模块和服务能被Angular注入系统识别。
• inject()函数必须在Angular的注入上下文内调用，而Storybook的render函数恰好运行在此上下文中，可直接用于获取服务实例。
• 若你的ToasterService已通过providedIn: 'root'注册为根服务，providers数组可省略，但显式声明能保证Storybook环境的独立性，避免依赖全局注入。

内容的提问来源于stack exchange，提问作者Smaillns