0

我有组件女巫是这样呈现的

     <app-content-tabs>

        <app-tab tabTitle="Request info">tab 1 content</app-tab>

        <app-tab tabTitle="Subject details">tab 2 content</app-tab>

     </app-content-tabs>

我也有这个组件的故事：

import {ContentTabsComponent} from "../../../../app/components/ui/content-tabs/content-tabs.component";

import {ContentTabsModule} from "../../../../app/components/ui/content-tabs/content-tabs.module";

import {Meta, Story} from "@storybook/angular/types-6-0";

import {moduleMetadata} from "@storybook/angular";



export default  {

  component: ContentTabsComponent,

  decorators: [

    moduleMetadata({

      declarations: [ ],

      imports: [ContentTabsModule ],

      providers: []

    })],

  title: 'Components/ui/content-tabs',

} as Meta



const Template: Story<ContentTabsComponent> = (args: ContentTabsComponent) => ({

  props: args,

  template: `

  <div style="width: 256px;height: 698px">

  <app-content-tabs>

    <app-tab tabTitle="Request info">tab 1 content</app-tab>

    <app-tab tabTitle="Subject details">tab 2 content</app-tab>

   </app-content-tabs>

</div>

  `

});





export const TabsExample = Template.bind({});

当我进入组件的文档并复制它生成的源代码时，问题出在故事书网络应用程序中：

<app-content-tabs></app-content-tabs>

如何修复源代码以显示完整示例，并将代码投影到 ng-content 中？

我试图在故事书文档中找到，但没有运气

4

1 回答 1

0

您需要将 html 模板放入单个故事本身。

const Template如下更改该行：

const Template: Story<ContentTabsComponent> = (args: ContentTabsComponent) => ({
  props: args
});

然后将html模板放入示例中：

export const TabsExample: Story = (args: ContentTabsComponent) => ({
  props: args,
  template: `
    <div style="width: 256px;height: 698px">
      <app-content-tabs>
        <app-tab tabTitle="Request info">tab 1 content</app-tab>
        <app-tab tabTitle="Subject details">tab 2 content</app-tab>
      </app-content-tabs>
    </div>
  `
});

app-content-tabs之后，如果需要，您可以指定参数：

TabsExample.args = {
  foo: 'bar'
}

复制故事书中的代码应该会给你整个模板。

于 2022-01-12T20:21:37.563 回答