如何在 Angular Storybook 组件中注入服务？

Question

Github：https://github.com/danielhdz56/storybook-demo.git

在组件中注入服务总是会在故事书中引发错误：

Error: Can't resolve all parameters for CustomService: (?).

一个示例组件：

 @Component({
   selector: 'app-custom-selector',
   templateUrl: './custom-selector.component.html',
   styleUrls: ['./custom-selector.component.scss'],
 })
 export class NavigationItemComponent {
   constructor(private customService: CustomService) {}
 }

Answer 1

你需要将它们添加到模块元数据中

const modules = {
    imports: [..],
    providers: [CustomService],
    declarations: [NavigationItemComponent ]
};

// Then in stories: 
.add('description',
    () => ({
        component: NavigationItemComponent ,
        props: {...},
        moduleMetadata: modules
    }
)