可能需要使用一个插件来解决此问题。首先安装@storybook/addon-docs
:
npm install --save-dev @storybook/addon-docs
然后在.storybook/main.js
中添加:
module.exports = {
addons: ['@storybook/addon-docs']
};
在要测试的组件中,确保您有一个子组件,该组件具有ng-content
:
// test.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-test',
templateUrl: './test.component.html'
})
export class TestComponent {}
最后,在storybook组件中使用doc
注释添加说明文档,如下所示:
import { TestComponent } from './test.component';
export default {
title: 'Test',
decorators: [
moduleMetadata({
declarations: [TestComponent]
})
],
parameters: {
docs: {
description: {
component: 'This should work with content projection'
}
}
}
};
export const defaultView = () => ({
component: TestComponent,
template: `This is projected content
`
});
下一篇:Angular内容未显示