ViewChild 如何在 Angular 和 Storybook 中工作？

Posted 2023-02-19

【中文标题】ViewChild 如何在 Angular 和 Storybook 中工作？

【英文标题】：How does ViewChild work in Angular with Storybook?

【发布时间】：2021-05-06 07:51:10

【问题描述】：

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

我不完全确定如何在这里渲染传入的内容。

【参考方案1】：

您必须在故事的moduleMetadata 部分的declarations 下包含您在故事中使用的所有组件。 这可能如下所示：

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

（假设 help-title 和 help-body 的组件名称是 HelpTitleComponent 和 HelpBodyComponent）