如何解决Angular Storybook材质对话框
我正在尝试将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是我在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
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。