使用 Storybook 中的控件更改组件中变量的值时，Angular 中未触发 ngOnChanges

Question

我使用 Storybook 创建组件库，我遇到了这个问题，我的组件实现了 ngOnChanges 方法，当我从 Storybook 控件传递值时，该方法不会运行。值从故事传递到组件，并且组件对标题进行视觉更改，但是尽管值传递到变量，但我的 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 上提出的，故事书的成员已经回复说我们可以使用旋钮插件。但是 Knobs 插件已被弃用，因此我需要帮助来解决这个问题吗？提前致谢。github 上提出了类似的问题 - https://github.com/storybookjs/storybook/issues/15610

Answer 1

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

也尝试去实施吧。这是一个例子。

export class CountComponent implements OnInit, OnChanges {

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