Как подписаться на Output ивенты компонента в Angular Storybook?

Чтобы подписаться на Output события компонента в Angular Storybook, следуйте этим шагам:

1. Установите Angular Storybook в ваш проект, если ещё не сделали это. Вы можете установить его, выполнив следующую команду в вашем терминале:

ng add @storybook/angular

2. Создайте файл stories.ts в вашем компоненте. В этом файле вы определите «истории» или различные состояния вашего компонента, которые вы хотите показать в Storybook.

3. В stories.ts импортируйте ваш компонент и определите истории для него. Например, вы можете определить историю для компонента с именем MyComponent следующим образом:

import { Meta, Story } from '@storybook/angular';
import { MyComponent } from './my.component';

export default {
  title: 'MyComponent',
  component: MyComponent,
} as Meta;

const Template: Story<MyComponent> = (args: MyComponent) => ({
  props: args,
});

export const Primary = Template.bind({});
Primary.args = {
  // Ваши аргументы компонента
};

4. В вашем компоненте, если вы хотите определить Output событие, добавьте @Output() декоратор перед свойством вашего Output события. Например, вы можете добавить Output событие с именем myEvent следующим образом:

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

@Component({
  selector: 'app-my-component',
  template: `
    <button (click)="emitEvent()">Emit Event</button>
  `,
  styles: [],
})
export class MyComponent {
  @Output() myEvent: EventEmitter<any> = new EventEmitter();

  emitEvent() {
    this.myEvent.emit();
  }
}

5. В вашем stories.ts файле добавьте actions аргумент в Template.bind() для вашей истории, чтобы ассоциировать событие компонента и слушать его в Storybook. Например, вы можете добавить actions аргумент для слушателя Output события myEvent следующим образом:

import { Meta, Story, moduleMetadata } from '@storybook/angular';
import { MyComponent } from './my.component';
import { action } from '@storybook/addon-actions';

export default {
  title: 'MyComponent',
  component: MyComponent,
  decorators: [
    moduleMetadata({
      declarations: [MyComponent],
    }),
  ],
} as Meta;

const Template: Story<MyComponent> = (args: MyComponent) => ({
  props: args,
  template: `
    <app-my-component (myEvent)="onEvent($event)"></app-my-component>
  `,
});

export const Primary = Template.bind({});
Primary.args = {};

Primary.argTypes = {
  onEvent: {
    action: 'myEvent',
  },
};

Primary.decorators = [
  moduleMetadata({
    declarations: [MyComponent],
  }),
];

Primary.parameters = {
  actions: {
    handles: ['myEvent'],
  },
};

Primary.argTypes = {
  onEvent: {
    action: 'myEvent',
  },
};

export const onEvent = action('myEvent');

6. Теперь вы сможете видеть и слушать Output событие myEvent в Storybook при запуске вашего компонента с историей Primary.

Это основные шаги, которые необходимо выполнить, чтобы подписаться на Output события компонента в Angular Storybook. Надеюсь, этот ответ окажется полезным для вас! Если у вас есть ещё вопросы, не стесняйтесь задавать их.