Angular Storybook 材质对话框

Posted 2023-02-19

【中文标题】Angular Storybook 材质对话框

【英文标题】：Angular Storybook Material Dialog

【发布时间】：2020-12-30 11:27:01

【问题描述】：

我正在尝试将 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) 但我不知道将构造函数放在哪里。 我试图在旋钮回调中创建整个组件的新实例，但没有运气。有什么想法吗？

【参考方案1】：

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

这是一种对我有用的方法，虽然我不像其他人那样熟悉 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
);

Launch button

Modal