javascript - 在故事书 5.2 中使用装饰器包装故事 - typescript/Angular

Question

我来自 5.2 版之前的故事书，使用 storiesOf如果我想包装我的组件，我会使用模板。

EG

.add('Test', () => ({
  component: TestComponent,
  template: `
    <div class="wrapper">
      <test-component></test-component>...

在 5.2 中，推荐的编写故事的方式发生了变化，并描述了如何使用装饰器来实现相同的结果 https://storybook.js.org/docs/basics/writing-stories/#decorators 。然而，我正在使用 Angular 并努力寻找解决方案，因为只有 React 和 Vue 示例。两者都使用特定的功能/组件

In Vue projects you have to use the special component <story/> instead of the function parameter storyFn that is used in React projects

使用template与旧规范一样，我尝试了以下操作

1. 作为初步测试 template作品

export const Test = () => ({
  component: TestComponent,
  template: `Expecting just this text`
});

结果:查看文本“仅期待此文本”

使用<TestComponent>

export const Test = () => ({ component: TestComponent,
  template: <div class="wrapper"><TestComponent></TestComponent></div>
});

结果:空白屏幕，显示 Template parse errors:
'CheckboxComponent' is not a known element:建议使用`架构:[CUSTOM_ELEMENTS_SCHEMA]

使用<test-component>

export const Test = () => ({
  component: TestComponent,
  template: `<div class="wrapper"><test-component></test-component></div>`
});

结果:空白屏幕，显示 Template parse errors: 'CheckboxComponent' is not a known element:建议使用架构:[CUSTOM_ELEMENTS_SCHEMA]

对于 2 和 3，我尝试添加

export const Test = () => ({
  component: TestComponent,
  addDecorator: moduleMetadata({
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
  }),
  template: `[tried both templates from 2 & 3]`
});

结果:同样的错误再次出现

有人可以阐明如何在 typescript 中完成此操作以及我出错的地方 - 谢谢。

Answer 1

找到了在 5.2 中使用新故事格式实现这一点的方法。通过添加 [CUSTOM_ELEMENTS_SCHEMA] 并声明组件修复了模板解析错误。

我还在使用 docs addOn https://github.com/storybookjs/storybook/tree/master/addons/docs并添加了这方面的功能。

我已经包含了 https://storybook.js.org/docs/formats/storiesof-api/ 的两个故事和组件故事格式 (CSF) https://storybook.js.org/docs/formats/component-story-format/以防其他人遇到困难。

API 故事

import { TestComponent } from './test.component';
import { storiesOf, moduleMetadata } from '@storybook/angular';
import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

storiesOf('Elements|Test', module)
  .addParameters({ // only needed for docs add-on
    component: TestComponent, 
    componentSubtitle: 'Subtitle'
    // docs: { page: null } uncomment this to disabled docs
  })
  .addDecorator(
    moduleMetadata({
      imports: [CommonModule],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      declarations: [TestComponent]
    })
  )
  .add('Test', () => ({
    component: TestComponent,
    template: `<div class="test">test text<app-test></app-test></div>`
  }));

脑脊液

import { TestComponent } from './test.component';
import { moduleMetadata, } from '@storybook/angular';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

export default {
  title: 'Elements|Test',
  component: TestComponent, // only needed for docs add-on
  parameters: { // only needed for docs add-on
    componentSubtitle: 'Subtitle.'
    // docs: { page: null } uncomment this to disabled docs
  },
  decorators: [
    moduleMetadata({
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      declarations: [TestComponent]
    })
  ]
};

export const Test = () => ({
  component: TestComponent,
  template: `<div class="text">test text<app-test></app-test></div>`
});