我正在尝试使用提供的教程(https://www.learnstorybook.com/intro-to-storybook/angular/en)在Angular中建立一个基本的故事书项目。
我已经完成了所有步骤,除了屏幕部分中触发的操作之外,所有内容均按说明进行渲染和工作。单击子TaskListComponent / TaskComponent会触发一个Storybook操作,尽管该教程清楚地显示了它们已被触发。
我已经按照与教程完全相同的方式设置了所有内容。唯一的区别是我使用的是NgRx而不是NGXS,尽管我看不出这会有什么影响。
我曾尝试提供本教程中提到的onPinTask和onArchiveTask操作作为道具,但是由于组件是嵌套的,因此无法使用。我还尝试在其实时应用示例中尝试进行类似this story的操作,在该示例中,它们具有以下内容:
const props: { [K in keyof ChipsGroupComponent]?: any } = {
chips: object('Chips', [
{
id: 1,
text: 'Chip 1',
},
{
id: 2,
text: 'Chip 2',
},
]),
removeChipClick: action('Remove chip'),
removeAllChipsClick: action('Remove all chips clicked'),
};
但是我也没有运气来展示动作。我不确定在安装过程中是否做错了什么,或者Angular实现需要额外的操作。
下面是我的pure-inbox-screen.stories.ts文件,如果有帮助的话:
const FEATURE_KEY = 'todos';
// pure-inbox-screen.stories.ts
const initialState = {
[FEATURE_KEY]: {
entities: defaultTasks,
},
};
export default {
title: 'PureInboxScreen',
decorators: [
moduleMetadata({
imports: [TaskModule, StoreModule.forRoot({})],
providers: [provideMockStore({ initialState })],
}),
],
};
// inbox screen default state
export const Default = () => ({
component: PureInboxScreenComponent,
});
// inbox screen error state
export const error = () => ({
component: PureInboxScreenComponent,
props: {
error: true,
},
});
是否有人知道如何实现屏幕/嵌套组件以及如何触发他们在故事书ui中显示的动作?