如何将角材料组件正确导入 StoryBook CSF

Posted

技术标签:

【中文标题】如何将角材料组件正确导入 StoryBook CSF【英文标题】:How to properly import angular material components into StoryBook CSF 【发布时间】:2020-02-18 03:55:18 【问题描述】:

我有一个相对简单的角度组件,它使用角度材料组件 - 特别是 mat-menu。

创建故事时,出现运行时错误:

    Error: Template parse errors:
Can't bind to 'matMenuTriggerFor' since it isn't a known property of 'button'. ("
        </li>
        <li class="nav-item">
          <button class="menubtn" mat-icon-button [ERROR ->][matMenuTriggerFor]="menu">
            <span class="fa-stack fa-md">
              <i class="fa fa-g"): ng:///DynamicModule/VeradigmHeaderComponent.html@33:50
There is no directive with "exportAs" set to "matMenu" ("
            </span>
          </button>
          <mat-menu [ERROR ->]#menu="matMenu" xPosition="before">
            <button mat-menu-item (click)="setLoc('en_US')">en-US"): ng:///DynamicModule/VeradigmHeaderComponent.html@38:20
'mat-menu' is not a known element:
1. If 'mat-menu' is an Angular component, then verify that it is part of this module.
2. If 'mat-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
            </span>
          </button>

我假设我必须导入 MatMenuModule,但我不知道如何执行此操作。这是我的故事:

import TestHeaderComponent from './test-header.component';
import  MatMenuModule from '@angular/material';


export default 
    title: 'Test Header',
;

export const TestHeader= () => (
    component: TestHeaderComponent,
    props:  ,
);

TestHeader.story = 
    name: 'default',
    imports: [
        MatMenuModule,
    ],
;

我也尝试将导入直接放入 Testheader 中,但都没有工作。如果我使用 storiesOf API,我可以这样做:

stories.addDecorator(
    moduleMetadata(
        imports: [MatMenuModule],
    )
);

但我不知道 CSF 中的格式。请帮忙!

【问题讨论】:

你在 app.module.ts 中导入 MatMenuModule 了吗? 它在我的应用模块中。我可以使用 stories.addDecorator(moduleMetadata(imports: [MatMenuModule])) 使其与 storiesOf 格式一起工作,但我不知道如何在 CSF 中做到这一点。 【参考方案1】:

我已经这样做了

import  moduleMetadata  from '@storybook/angular';

export default 
    title: "Task",
    decorators: [
        moduleMetadata(
            imports: [MyModule]
        )
    ]

【讨论】:

将以上内容添加到您的故事脚本中。这个答案虽然正确并没有说明这一点。 +1。

以上是关于如何将角材料组件正确导入 StoryBook CSF的主要内容,如果未能解决你的问题,请参考以下文章

将故事书组件导入另一个 Angular 项目

Storybook 不理解 antd 组件的按需导入

NX - 带有 Storybook 和单独导出组件的 UI 库

如何在 Laravel-Vue.js 应用程序中使用 Storybook

Vue 3 Storybook:(PrimeVue)组件不显示

Storybook 需要导出默认的 Ant Design 组件以应用样式