0

我有一个名为 inline-help 的组件。组件的模板是这样的：

<div class="inline-help" #helpBlock>
      <div class="help-icon" (mouseover)="handleMouseOver($event)" (mouseout)="handleMouseOut()">
        <i class="icon-help"></i>
      </div>
      <div #helptext class="inline-help-text text-left" [class.inline-help-visible]="visible">
        <ng-content select="help-title" class="help-title"></ng-content>
        <ng-content select="help-body" class="help-body"></ng-content>
      </div>
</div>

这个组件可以像这样使用（并且正常工作）：

<inline-help>
    <help-title>This is the title</help-title>
    <help-body>This is the body</help-body>
</inline-help>

但是，这在文件中不起作用InlineHelp.stories.ts：

export default {
  title: 'Library/Inline-help',
  component: InlineHelpComponent,
  decorators: [
    moduleMetadata({
      declarations: [InlineHelpComponent],
      imports: [CommonModule],
    }),
  ],
} as Meta;

const Template: Story<InlineHelpComponent> = (args: InlineHelpComponent) => ({
  component: InlineHelpComponent,
  props: args,
  template: `
 <inline-help>
  <help-title>my title</help-title>
  <help-body>my help body</help-body>
 <inline-help>
  `,
});

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

我收到此错误：

Template parse errors:
'help-title' is not a known element:
1. If 'help-title' is an Angular component, then verify that it is part of this module.
2. If 'help-title' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

我不确定要在这里做什么来呈现传入的内容。

4

1 回答 1

0

You have to include all the components that you are using in your story under the declarations in the moduleMetadata section of your story. This could look like this:

export default {
  title: 'Library/Inline-help',
  component: InlineHelpComponent,
  decorators: [
    moduleMetadata({
      declarations: [InlineHelpComponent, HelpTitleComponent, HelpBodyComponent],
      imports: [CommonModule],
    }),
  ],
} as Meta;

(This assumes the component names for help-title and help-body are HelpTitleComponent and HelpBodyComponent)

于 2021-03-24T22:09:33.633 回答