要在Angular Storybook中使用属性旋钮和ng-content,首先需要安装相应的依赖。确保你已经安装了@storybook/addon-knobs和@storybook/addon-notes。
接下来,创建一个stories文件夹,并在其中创建一个名为your-component.stories.ts的文件。
在your-component.stories.ts中,导入你的组件和一些必要的依赖项:
import { storiesOf } from '@storybook/angular';
import { withKnobs, text } from '@storybook/addon-knobs';
import { withNotes } from '@storybook/addon-notes';
import { YourComponent } from '../your-component.component';
然后,使用storiesOf()函数创建一个故事集:
storiesOf('YourComponent', module)
.addDecorator(withNotes)
.addDecorator(withKnobs)
.add('Default', () => ({
component: YourComponent,
props: {
content: text('Content', 'Default content')
},
template: `
`,
notes: { markdown: 'This is a default story for YourComponent' }
}));
在上面的代码中,我们使用withNotes()和withKnobs()装饰器来启用笔记和属性旋钮。然后,使用add()方法创建一个名为"Default"的故事。在模板中,使用ng-content来插入任意内容。
最后,导出storiesOf对象:
export default {
title: 'YourComponent'
};
现在,你可以在Storybook中查看和测试你的组件,属性旋钮将允许你动态更改内容,并且ng-content会显示插入的内容。
希望这个解决方案能帮到你!