时间戳

首页 > 解决方案 > ViewChild 如何在 Angular 和 Storybook 中工作？

angular - ViewChild 如何在 Angular 和 Storybook 中工作？

问题描述

我有一个名为 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.

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

标签： angularstorybookviewchildangular-storybook

解决方案

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)

推荐阅读