Блог

Я пытаюсь использовать Angular с Storybook и открыть диалоговое окно mat с помощью кнопки.

 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) {} , но я понятия не имею, куда поместить конструктор.
Я попытался создать новый экземпляр всего компонента в обратном вызове ручки, но безуспешно. Есть какие-нибудь идеи?

Не уверен, насколько важна часть с ручкой.

Это способ, который сработал для меня, хотя я не так хорошо знаком со Сборником рассказов, как некоторые люди.

Я создал фиктивный компонент там, в моей истории. Очевидно, что его можно извлечь в какое-то место, чтобы каким-то образом повторно использовать. А LaunchComponent — это компонент, который я затем использую в Сборнике рассказов.

Обратите внимание: 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
});
  

Кнопка запуска

Модальный