Angular Storybook - 道具旋钮和 ng-content

Posted 2023-02-19

【中文标题】Angular Storybook - 道具旋钮和 ng-content

【英文标题】：Angular Storybook - prop knobs and ng-content

【发布时间】：2020-07-12 11:18:06

【问题描述】：

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

我无法让这两者协同工作，因为从 what I've found 开始，使用 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，所以似乎没有在该模板中传递的任何道具都没有注入到组件中，因此旋钮变得无用。这似乎意味着我应该摆脱所有组件故事中的道具，而只是通过模板传递它们，但这会使它们在所服务的故事书中不可配置，并且在很大程度上失去了意义。

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

【参考方案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>`,
);