时间戳

首页 > 解决方案 > 如何使用 html 模板以角度编写故事书 CSF 故事

angular - 如何使用 html 模板以角度编写故事书 CSF 故事

问题描述

如何使用故事书新的 CSF 格式通过 thml 标签添加组件？像这样（旧 storiesOf 格式）：

const modules = {
    imports: [ReactiveFormsModule],
    declarations: [AddressComponent],
};

storiesOf('Core/Address Component - storiesOf', module)
    .add('as component', () => ({
        moduleMetadata: modules,
        component: AddressComponent,
        props: {
            title: 'test',
        },
    }))
    .add('via html tag', () => ({
        moduleMetadata: modules,
        template: `
            <app-address title="test"></app-address>
        `,
    }));

我已经尝试过了（新的 CSF 格式）：

export default {
    component: AddressComponent,
    title: 'Core/AddressComponent',
    decorators: [
        moduleMetadata({
            // imports both components to allow component composition with storybook
            providers: [],
            schemas: [CUSTOM_ELEMENTS_SCHEMA],
            imports: [ReactiveFormsModule],
        }),
    ],
};
export const fromHtmlTemplate = () => ({
    component: AddressComponent,
    template: `<app-address title="testerasef"></app-address>`,
});

...但结果只是故事书中的一个空白页....

标签： angularstorybook

解决方案

好的，我只是错过了这个声明：

export default {
    component: AddressComponent,
    title: 'Core/AddressComponent',
    decorators: [
        moduleMetadata({
            schemas: [CUSTOM_ELEMENTS_SCHEMA],
            declarations: [AddressComponent],
            imports: [ReactiveFormsModule],
        }),
    ],
};
export const fromHtmlTemplate = () => ({
    template: `<app-address title="testerasef"></app-address>`,
});

希望这对某人有所帮助，直到故事书更新文档...

推荐阅读