![](/img/trans.png)
[英]how to write storybook CSF stories with html template in angular
[英]How to properly import angular material components into StoryBook CSF
我有一個相對簡單的 angular 組件,它使用 angular 材料組件 - 特別是 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 中的格式。 請幫忙!
我已經這樣做了
import { moduleMetadata } from '@storybook/angular';
export default {
title: "Task",
decorators: [
moduleMetadata({
imports: [MyModule]
})
]
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.