1

我正在尝试将 Angular 与 Storybook 一起使用，并使用按钮旋钮打开一个垫子对话框。

import { YesNoBoxComponent } from './yes-no-box.component';
import { withKnobs, button } from '@storybook/addon-knobs';
import { moduleMetadata } from '@storybook/angular';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';

export default {
  title: 'YesNoBoxComponent',
  decorators: [
    withKnobs,
    moduleMetadata({
      imports: [MatDialogModule],
    })
  ],
};

export const Card = () => ({
  component: YesNoBoxComponent,
  props: {
    open: button('Has Close Button', () => {
      
      const dialogRef = this.dialog.open(YesNoBoxComponent, {
        width: '250px',
      });
    })
  },
});

我需要添加constructor(public dialog: MatDialog) {}但我不知道将构造函数放在哪里。我试图在旋钮回调中创建整个组件的新实例，但没有运气。有任何想法吗？

4

1 回答 1

2

不确定旋钮部分的重要性。

这是一种对我有用的方式，尽管我不像其他人那样熟悉 Storybook。

我在我的故事中创建了一个虚拟组件。显然可以提取到某个地方以某种方式重用它。LaunchComponent 是我随后在 Storybook 中使用的组件。

注意：MaterialProviders和PromptDialogComponent是内部模块和组件。

@Component({
  template: `
    <button mat-flat-button (click)="launch()"> Launch </button>`
})
class LaunchComponent {
  constructor(private _dialog: MatDialog) {}

  public launch(): void {
    this._dialog.open(PromptDialogComponent);
  }
}

export const primary = () => ({
  moduleMetadata: {
    imports: [BrowserAnimationsModule, MatDialogModule, MaterialProviderModule],
    declarations: [LaunchComponent]
  },
  component: LaunchComponent
});

启动按钮

模态

于 2020-09-18T10:19:44.230 回答