如何在 angular 中使用 html 模板編寫故事書 CSF 故事

Question

如何使用故事書新的 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>`,
});

...但結果只是故事書中的一個空白頁....

Answer 1

好的，我只是錯過了這個聲明：

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>`,
});

希望這對某人有所幫助，直到故事書更新文檔...