Angular Storybook 订阅输出

问题描述

如何在 Angular 的 Storybook 中订阅组件输出？

例如，我有这样的组件及其输出操作：

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

@Component({
  selector: 'app-task',template: `
    <div class="list-item">
      <input type="text" [value]="task.title" readonly="true" />
    </div>
  `,})
export class TaskComponent {
  @input() task: any;

  // tslint:disable-next-line: no-output-on-prefix
  @Output()
  onPinTask = new EventEmitter<Event>();

  // tslint:disable-next-line: no-output-on-prefix
  @Output()
  onArchiveTask = new EventEmitter<Event>();
}

而且我还有组件的 Storybook 文件：

import { Story,Meta } from '@storybook/angular/types-6-0';
import { action } from '@storybook/addon-actions';

import { TaskComponent } from './task.component';

export default {
  title: 'Task',component: TaskComponent,excludeStories: /.*Data$/,} as Meta;

export const actionsData = {
  onPinTask: action('onPinTask'),onArchiveTask: action('onArchiveTask'),};

const Template: Story<TaskComponent> = args => ({
  component: TaskComponent,props: {
    ...args,onPinTask: actionsData.onPinTask,onArchiveTask: actionsData.onArchiveTask,},});

export const Default = Template.bind({});
Default.args = {
  task: {
    id: '1',title: 'Test Task',state: 'TASK_INBox',updatedAt: new Date(2018,1,9,0),};

export const Pinned = Template.bind({});
Pinned.args = {
  task: {
    ...Default.args.task,state: 'TASK_PINNED',};

export const Archived = Template.bind({});
Archived.args = {
  task: {
    ...Default.args.task,state: 'TASK_ARCHIVED',};

如何订阅 Storybook 文件中的组件 Output 并为事件执行一些操作，例如 onPinTask 或 onArchiveTask？ 需要模拟父组件。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）