2

我使用 storybook 创建组件库，我遇到了这个问题，我的组件实现了一个 ngOnChanges 方法，当我从 Storybook Controls 传递值时，该方法不会运行。值从故事传递到组件，组件对标题进行视觉更改，但是尽管值被传递给变量，但我的 ngOnChanges 方法没有被触发。

这是我传递值的故事书代码：

import { moduleMetadata } from '@storybook/angular';
import { CommonModule } from '@angular/common';
// also exported from '@storybook/angular' if you can deal with breaking changes in 6.1
import { Story, Meta } from '@storybook/angular/types-6-0';

import { CountComponent } from '../app/count/count.component';

export default {
  title: 'Example/Count Component',
  component: CountComponent,
} as Meta;
const Template: Story<CountComponent> = (args: CountComponent) => ({   component: CountComponent,   props: args, });
    
export const Title = Template.bind({}); Title.args = {   widgetName: '', };

所以如此处所示，我尝试将故事“Title”中的值传递给如下所示的 widgetName 变量，因此我期望传递给计数组件@Input() widgetName ="Total Confirmed";，当变量值通过故事书模板更改时，该组件在更改时应触发 ngOnChanges

这就是我试图传递故事中的价值的地方。 在此处输入图像描述

这是我的计数组件：

export class CountComponent implements OnInit {

  @Input() widgetName ="Total Confirmed";


  constructor() { }

  ngOnInit(): void {
  }

  ngOnChanges() {
    console.log(this.widgetName)
    //other methods
  }

}

经过一番搜索，我注意到这个问题是在 GitHub 上提出的，故事书的成员回复说我们可以使用旋钮插件。然而，旋钮插件已被弃用，因此我需要帮助来解决这个问题吗？提前致谢。github上提出了类似的问题 - https://github.com/storybookjs/storybook/issues/15610

4

1 回答 1

0

根据您的CountComponent。您没有实现 OnChanges 接口。

也尝试实现它。这是一个例子。

export class CountComponent implements OnInit, OnChanges {

请注意，如果您不使用 OnInit 生命周期挂钩，最好将其删除

于 2022-02-01T09:24:52.187 回答