如何解决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 举报,一经查实,本站将立刻删除。