Angular Storybook - 道具旋钮和 ng-content

Question

我正在使用 Storybook 构建一个 Angular 应用程序。我希望我的故事有可控旋钮，但其中一些组件需要

ng-content

。

我很难让这两者一起工作，因为，根据我发现的，使用 Storybook 将内容传递到组件需要在故事上设置

template

。不幸的是，模板似乎基本上覆盖了 Storybook 的旋钮传递道具。

示例如下：

button.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'ui-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.scss']
})
export class ButtonComponent implements OnInit {
  types: String[] = [];

  constructor() {}

  ngOnInit(): void {}

  typeClasses(): String[] {
    return this.types.map(t => `button--${t}`);
  }
}

button.component.html

<a class="button" [ngClass]="typeClasses()">
  <ng-content></ng-content>
</a>

button.component.stories.ts

import { text, array } from '@storybook/addon-knobs';
import { ButtonComponent } from './button.component';

export default {
  title: 'ButtonComponent'
};

export const dark = () => ({
  moduleMetadata: {
    declarations: [ButtonComponent], // Removed if no template
    imports: []
  },
  // component: ButtonComponent, replaced with the below because of ng-content
  template: `<ui-button>Button content</ui-button>`, // Needed to pass arbitrary child content
  props: {
    types: array('class', ['dark']), // Ignored, because it's not in template
  }
});

我是否缺少更好的传递内容的方法？因为我必须给出完整的

template

，所以似乎该模板中未传递的任何道具都不会注入到组件中，因此旋钮变得毫无用处。这似乎意味着我应该删除所有组件故事上的道具，而只是通过模板传递它们，但这将使它们在所提供的 Storybook 中不可配置，并破坏了大部分要点。

我这样做错了吗？有没有办法既 A）传递内容，又 B）允许道具？ Angular Storybook 指南 似乎没有解决这个问题。

Answer 1

使用最新的故事书版本（

"@storybook/angular": "^5.3.19"

），这似乎有效。我纯属运气才发现它：

export const Default = () => ({
    moduleMetadata: {
        declarations: [AppComponent],
    },
    props: {
        propInput: {
            foo: 1,
            bar: {
                baz: ["zxc"]
            }
        }
    },
    template: `<app-component [componentInput]="propInput"> Hello World </app-component>`,
});

Answer 2

  export default {
    decorators: [
      componentWrapperDecorator(YourComponent, ({args}) => args)
    ],
    render: (args) => ({
      props: {...args},
      template: `projected content`
    })
  } as Meta<YourComponent>;

此装饰器 fn 保留所有输入和输出，使用组件映射的输入和输出创建空包装器。