时间戳

首页 > 解决方案 > Angular Storybook - 道具旋钮和 ng-content

angular - Angular Storybook - 道具旋钮和 ng-content

问题描述

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

我无法让这两者一起工作，因为根据我的发现，使用 Storybook 将内容传递到组件涉及template在故事上设置 a。不幸的是，模板似乎基本上覆盖了 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，所以似乎没有在该模板中传递的任何道具都没有注入到组件中，因此旋钮变得无用。这似乎意味着我应该摆脱所有组件故事中的道具，而只是通过模板传递它们，但这会使它们在所服务的故事书中无法配置，并且在很大程度上失去了意义。

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

标签： angularstorybookangular-storybook

解决方案

使用最新的故事书版本 ( "@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>`,
});

推荐阅读