无法在 MDX 中为 Angular 组件故事书创建文档

问题描述

我正在尝试记录一个使用 Angular 8 创建的简单按钮组件。我正在按照为 Angular 创建 MDX 的教程进行操作，但是我遇到了几个错误并且应用程序无法编译。我开始认为他们拥有的 Angular 文档要么不准确，要么我遗漏了一些东西，请帮忙。

这是我的 MDX 文档的样子，我只是想为默认 Storybook 安装附带的现有演示组件创建一个文档。

button.stories.mdx

    import { Meta,Story,Canvas } from '@storybook/addon-docs/blocks';
    import Button from './button.component';
    
    <Meta title="Example/Button" component={Button}/>
    
    # Welcome to Storybook
    
    Storybook helps you build UI components in isolation from your app's business logic,data,and context.
    That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development,testing,or QA.
    
    export const Template = (args) => <Button {...args} />
    
    <Canvas>
        <Story name="Button"
        args={{ 
          label: 'test button'
        }}>
        {Template.bind({})}
       </Story>
    </Canvas>

按钮故事如下所示：

Button.stories.ts

import { Story,Meta } from '@storybook/angular/types-6-0';
        import Button from './button.component';
        
        export default {
          title: 'Example/Button',component: Button,argTypes: {
            backgroundColor: { control: 'color' },},} as Meta;
        
        const Template: Story<Button> = (args: Button) => ({
          component: Button,props: args,});
        
        export const Primary = Template.bind({});
        Primary.args = {
          primary: true,label: 'Button',};

仅供参考：按钮故事开箱即用

解决方法

所以经过一番搜索后，我发现了一些有用的东西，至少我的 MDX 文档已设置，我可以看到我的组件：

对于寻找相同内容的任何人，请在此处阅读他们专门针对 Angular 的文档：

https://github.com/storybookjs/storybook/tree/master/addons/docs/angular

angular angular javascript storybook uicomponents